{"componentChunkName":"component---src-templates-post-js","path":"/blog/start-from-empty-to-ts-react","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"👌 简单 6 步从零开始配置 ts 和 react 环境","tips":[],"categories":["code"],"datetime":"2020-03-25 13:50:19","noFooter":false,"description":"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。","plainTextDescription":"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。\n","author":"Ubug","banner":null,"bannerCredit":null,"slug":"/blog/start-from-empty-to-ts-react","tags":["功能","思考","最佳实践","babel","Webpack","ES6","TypeScript"]},"headings":[{"value":"1、背景","depth":2},{"value":"2、最开始的地方","depth":2},{"value":"2.1 在代码托管平台上创建项目","depth":3},{"value":"2.2 本地初始化","depth":3},{"value":"2.3 webpack 技术栈","depth":3},{"value":"2.4 Babel","depth":3},{"value":"2.5 TypeScript","depth":3},{"value":"2.6 React","depth":3},{"value":"2.7 SCSS","depth":3},{"value":"2.8 ESLint","depth":3},{"value":"3、 最后的文件","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"start-from-empty-to-ts-react\",\n \"title\": \"👌 简单 6 步从零开始配置 ts 和 react 环境\",\n \"date\": \"2020-03-25 13:50:19\",\n \"author\": \"Ubug\",\n \"description\": \"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。\",\n \"categories\": [\"code\"],\n \"tags\": [\"功能\", \"思考\", \"最佳实践\", \"babel\", \"Webpack\", \"ES6\", \"TypeScript\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u8BA9\\u4F60\\u77E5\\u9053\\u4E00\\u4E2A\\u9879\\u76EE\\u7684\\u521D\\u59CB\\u5316\\u5E76\\u4E0D\\u662F\\u5FC5\\u987B\\u8981\\u5404\\u79CD\\u811A\\u624B\\u67B6\\uFF0C\\u53EA\\u8981\\u4F60\\u77E5\\u9053\\u8981\\u4EC0\\u4E48\\u548C\\u5176\\u4E2D\\u7684\\u914D\\u5408\\uFF0C\\u5C31\\u5F88\\u5BB9\\u6613\\u521D\\u59CB\\u5316\\u9700\\u8981\\u7684\\u9879\\u76EE\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"1\\u3001\\u80CC\\u666F\"), mdx(\"p\", null, \"\\u524D\\u7AEF\\u5DE5\\u7A0B\\u5316\\u80AF\\u5B9A\\u4F1A\\u8003\\u8651\\u7684\\u5C31\\u662F\\u9879\\u76EE\\u7684\\u521D\\u59CB\\u5316\\uFF0C\\u6216\\u8005\\u5F88\\u591A\\u7684\\u542F\\u52A8\\u6A21\\u677F\\u80FD\\u8282\\u7701\\u5F88\\u591A\\u7684\\u65F6\\u95F4\\uFF0C\\u4E0D\\u7528\\u7EA0\\u7ED3\\u5F88\\u591A\\u914D\\u7F6E\\u3002\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u5BF9\\u529F\\u80FD\\u7684\\u9700\\u6C42\\u5F53\\u7136\\u662F\\u4E0D\\u540C\\u7684\\uFF0C\\u5927\\u516C\\u53F8\\u591A\\u4EBA\\u534F\\u4F5C\\u7684\\u8BDD\\uFF0C\\u5DE5\\u7A0B\\u5316\\u662F\\u5FC5\\u987B\\u7684\\uFF0C\\u6BD5\\u7ADF\\u6709\\u4EBA\\u80FD\\u591F\\u7EF4\\u62A4\\uFF0C\\u4F46\\u662F\\u5BF9\\u4E8E\\u4E2A\\u4EBA\\u7684\\u8BDD\\u6CA1\\u6709\\u90A3\\u4E48\\u591A\\u7684\\u7EF4\\u62A4\\uFF0C\\u5DE5\\u7A0B\\u5316\\u5E76\\u6CA1\\u6709\\u90A3\\u4E48\\u597D\\u7684\\u6536\\u76CA\\uFF08\\u6211\\u4E2A\\u4EBA\\u5EFA\\u8BAE\\u80FD\\u5DE5\\u7A0B\\u5316\\u7684\\u5730\\u65B9\\u5C3D\\u91CF\\u62BD\\u8C61\\u51FA\\u6765\\uFF0C\\u6548\\u7387\\u8FD8\\u662F\\u6709\\u5F88\\u5927\\u63D0\\u5347\\u7684\\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u9879\\u76EE\\u521D\\u59CB\\u5316\\u7684\\u95EE\\u9898\\uFF09\\u3002\\u81EA\\u5DF1\\u7684\\u5C0F\\u9879\\u76EE\\u53EF\\u80FD\\u5F88\\u591A\\u65F6\\u5019\\u9700\\u8981\\u624B\\u52A8\\u914D\\u7F6E\\uFF0C\\u957F\\u65F6\\u95F4\\u4E0D\\u7528\\u8FD9\\u4E9B\\u6280\\u672F\\u5C31\\u751F\\u758F\\u4E86\\uFF0C\\u8FD9\\u91CC\\u6E10\\u8FDB\\u7684\\u5B9E\\u73B0\\u4E00\\u4E2A\\u73B0\\u5728\\u7ECF\\u5178\\u7684\\u5F00\\u53D1\\u73AF\\u5883 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"React\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"TypeScript\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ESlint\"), \"\\u3002\"), mdx(\"h2\", null, \"2\\u3001\\u6700\\u5F00\\u59CB\\u7684\\u5730\\u65B9\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u4E0B\\u9762\\u7684\\u5B89\\u88C5\\u53EF\\u80FD\\u4F1A\\u6709\\u5916\\u7F51\\u6D89\\u53CA\\uFF0C\\u53EF\\u4EE5\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"npm-config-china\"), \" \\u6216\\u8005 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/studio/dj\"\n }, \"\\u8E2E\\u811A\\u4E0A\\u7F51\"), \" \\u529F\\u80FD\\u3002\")), mdx(\"h3\", null, \"2.1 \\u5728\\u4EE3\\u7801\\u6258\\u7BA1\\u5E73\\u53F0\\u4E0A\\u521B\\u5EFA\\u9879\\u76EE\"), mdx(\"p\", null, \"\\u4F7F\\u7528\\u7248\\u672C\\u7BA1\\u7406\\u6765\\u7BA1\\u7406\\u6BCF\\u4E2A\\u9879\\u76EE\\u662F\\u6700\\u57FA\\u672C\\u7684\\u8981\\u6C42\\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u4FDD\\u5B58\\u4EE3\\u7801\\uFF0C\\u5176\\u4E2D\\u6D89\\u53CA\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"workflow\"), \"\\uFF08GitFlow\\u3001GitHub flow\\uFF09\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"CI/CD\"), \"(\\u6301\\u7EED\\u5F00\\u53D1\\u3001\\u81EA\\u52A8\\u5316\\u6D4B\\u8BD5\\u3001\\u6301\\u7EED\\u96C6\\u6210\\u3001\\u6301\\u7EED\\u90E8\\u7F72)\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u7248\\u672C\\u63A7\\u5236\"), \"(\\u91CC\\u7A0B\\u7891\\u3001\\u4EE3\\u7801\\u8BC4\\u5BA1)\\u7B49\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u5F97\\u5230\\u4E00\\u4E2A Git \\u9879\\u76EE\\u5730\\u5740\")), mdx(\"h3\", null, \"2.2 \\u672C\\u5730\\u521D\\u59CB\\u5316\"), mdx(\"p\", null, \"\\u5C06\\u4EE3\\u7801 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"clone\"), \" \\u62C9\\u5230\\u672C\\u5730\\uFF0C\\u7136\\u540E\\u7528\\u6700\\u7231\\u7684\\u7F16\\u8F91\\u5668\\u6253\\u5F00\\u9879\\u76EE\\u76EE\\u5F55\\uFF0C\\u7EC8\\u7AEF\\u4E2D\\u8FD0\\u884C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"npm\"), \" \\u521D\\u59CB\\u5316\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"# \\u4F7F\\u7528 npm \\u76F8\\u5173\\u751F\\u6001\\u7684\\u524D\\u63D0\\nyarn init\\n# \\u5F97\\u5230 package.json\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".gitignore\"), \" \\u5FFD\\u7565\\u524D\\u7AEF\\u5E38\\u89C1\\u7684\\u672C\\u5730\\u6587\\u4EF6\\u548C\\u76EE\\u5F55\\uFF08\\u5F00\\u53D1\\u4E2D\\u4E0D\\u9700\\u8981\\u8FDB\\u884C\\u7248\\u672C\\u7BA1\\u7406\\u3001\\u6216\\u8005\\u591A\\u7AEF\\u540C\\u6B65\\u7684\\u6587\\u4EF6\\uFF09\\uFF0C\\u521A\\u5F00\\u59CB\\u53EA\\u9700\\u8981\\u51E0\\u4E2A\\u5FC5\\u987B\\u7684\\uFF0C\\u5F00\\u53D1\\u7684\\u8FC7\\u7A0B\\u4E2D\\u6BCF\\u6B21\\u68C0\\u67E5\\u63D0\\u4EA4\\u5C31\\u4F1A\\u77E5\\u9053\\u54EA\\u4E9B\\u6587\\u4EF6\\u9700\\u8981\\u88AB\\u5FFD\\u7565\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-plaintext\"\n }, \"/node_modules\\nyarn-error.log\\nlogs\\n*.log\\nbuild\\n.DS_Store\\n\")), mdx(\"h3\", null, \"2.3 webpack \\u6280\\u672F\\u6808\"), mdx(\"p\", null, \"\\u4E00\\u822C\\u9879\\u76EE\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"webpack\"), \" \\u6253\\u5305\\u9879\\u76EE\\uFF0C\\u52A0\\u4E0A\\u57FA\\u672C\\u4E0A\\u5927\\u90E8\\u5206\\u90FD\\u9700\\u8981\\u5F00\\u53D1\\u548C\\u70ED\\u66F4\\u65B0\\u529F\\u80FD\\uFF0C\\u4E5F\\u9700\\u8981 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"webpack-dev-server\"), \"\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"yarn add -D webpack webpack-cli webpack-dev-server\\n\")), mdx(\"p\", null, \"\\u76F4\\u63A5\\u4F7F\\u7528\\u9ED8\\u8BA4\\u8BBE\\u7F6E\\u80FD\\u591F\\u8FD0\\u884C\\uFF0C\\u4F46\\u662F\\u4E00\\u822C\\u53EF\\u4EE5\\u914D\\u7F6E\\u4E0B\\u5165\\u53E3\\u548C\\u8F93\\u51FA\\uFF0C\\u540E\\u7EED\\u4E5F\\u9700\\u8981\\u8FD9\\u4E2A\\u914D\\u7F6E\\u6587\\u4EF6\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\",\n \"metastring\": \"filename=webpack.config.js\",\n \"filename\": \"webpack.config.js\"\n }, \"var path = require(\\\"path\\\");\\n\\nmodule.exports = {\\n entry: path.resolve(__dirname, \\\"../src/index.tsx\\\"),\\n output: {\\n path: path.resolve(__dirname, \\\"../build\\\"),\\n filename: \\\"bundle.js\\\"\\n },\\n};\\n\")), mdx(\"p\", null, \"\\u6B64\\u65F6\\u53EF\\u4EE5\\u5199 js \\u6587\\u4EF6\\u4E86\\uFF0C\\u80FD\\u591F\\u8F6C\\u8BD1\\u4E3A\\u517C\\u5BB9\\u7248\\u672C\\u7684\\u4EE3\\u7801\\uFF0C\\u4E00\\u4E2A\\u5F88\\u7B80\\u5355\\u7684\\u591A\\u6A21\\u5757\\u6253\\u5305\\u7CFB\\u7EDF\\uFF0C\\u4F46\\u662F\\u8FD8\\u662F\\u8FDC\\u8FDC\\u4E0D\\u591F\\u3002\"), mdx(\"p\", null, \"\\u56E0\\u4E3A\\uFF0C\\u60F3\\u8981\\u5199\\u9AD8\\u7EA7\\u8BED\\u6CD5\\u800C\\u4E0D\\u662F\\u517C\\u5BB9\\u7684\\u68A6\\u9B47\\uFF0C\\u9700\\u8981 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"babel-loader\"), \";\\u60F3\\u8981\\u52A0\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"less/scss\"), \" \\u7684\\u7F16\\u8BD1\\uFF0C\\u9700\\u8981 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"less-loader\"), \"\\uFF1B\\u60F3\\u8981\\u76F4\\u63A5\\u5F15\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"svg\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"css\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"md\"), \" \\u6587\\u4EF6\\u7B49\\u8FD8\\u9700\\u8981\\u5404\\u4E2A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"loader\"), \"\\uFF1B\"), mdx(\"h3\", null, \"2.4 Babel\"), mdx(\"p\", null, \"\\u9AD8\\u7EA7\\u8BED\\u6CD5\\u8F6C\\u6362\\u652F\\u6301\\uFF0C\\u907F\\u514D\\u82B1\\u8D39\\u65F6\\u95F4\\u5728\\u8BED\\u6CD5\\u517C\\u5BB9\\u8FD9\\u4E9B\\u5C0F\\u4E8B\\u4E0A\\u3002\\u4E4B\\u524D\\u6709\\u8BE6\\u7EC6\\u4ECB\\u7ECD: \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/babel-understanding\"\n }, \"\\uD83D\\uDCA1 Babel \\u518D\\u7406\\u89E3\\u548C\\u6700\\u4F73\\u5B9E\\u8DF5\"), \"\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"# babel \\u6700\\u4F73\\u5B9E\\u8DF5\\u5168\\u5BB6\\u6876\\nyarn add -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs3\\n# \\u8BA9 webpack \\u80FD\\u591F\\u4F7F\\u7528 babel\\nyarn add -D babel-loader\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u5728 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"webpack build\"), \" \\u914D\\u7F6E\\u6587\\u4EF6\\u4E2D\\u6307\\u5B9A\\u52A0\\u8F7D\\u5668\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\",\n \"metastring\": \"filename=webpack.config.js add=5-13\",\n \"filename\": \"webpack.config.js\",\n \"add\": \"5-13\"\n }, \" module.exports = {\\n entry: ...,\\n output: ...,\\n module: {\\n rules: [\\n {\\n test: /\\\\.js$/,\\n exclude: /(node_modules|bower_components)/,\\n use: 'babel-loader'\\n }\\n ]\\n },\\n };\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"babel.config.json\"), \" \\u6587\\u4EF6:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\",\n \"metastring\": \"filename=babel.config.json\",\n \"filename\": \"babel.config.json\"\n }, \"{\\n \\\"presets\\\": [\\n [\\n \\\"@babel/env\\\",\\n {\\n \\\"targets\\\": \\\">5%\\\", // \\u6307\\u5B9A\\u76EE\\u6807\\u6D4F\\u89C8\\u5668\\u8303\\u56F4\\n \\\"useBuiltIns\\\": false, // \\u7981\\u7528 env \\u7684 polyfill\\n }\\n ],\\n ],\\n \\\"plugins\\\": [\\n [\\n // \\u4E3A\\u4E86\\u5C06 babel \\u7684\\u8F85\\u52A9\\u51FD\\u6570\\u590D\\u7528\\u7684\\n \\\"@babel/plugin-transform-runtime\\\",\\n {\\n \\\"corejs\\\": 3, // \\u652F\\u6301\\u4F8B\\u5982 [].includes \\u7684\\u5B9E\\u4F8B\\u65B9\\u6CD5\\u7684 polyfill\\n \\\"useESModules\\\": true\\n }\\n ]\\n ]\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u5C31\\u80FD\\u5B8C\\u7F8E\\u652F\\u6301 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"babel\"), \" \\u7684\\u6839\\u636E\\u76EE\\u6807\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\\u7F16\\u8BD1\\u4E86\\uFF0C\\u52A0\\u4E0A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useBuiltIns: usage\"), \" \\u53EF\\u4EE5\\u81EA\\u52A8\\u6DFB\\u52A0\\u57AB\\u7247 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"polyfill\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@babel/plugin-transform-runtime\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@babel/runtime-corejs3\"), \" \\u7528\\u6765\\u63D0\\u53D6\\u56FA\\u5B9A\\u7684\\u8F85\\u52A9\\u51FD\\u6570\\u548C\\u57AB\\u7247 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"polyfill\"), \"\\u3002\"), mdx(\"h3\", null, \"2.5 TypeScript\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"babel\"), \" \\u80FD\\u591F\\u63A5\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"typescript\"), \" \\u7684\\u7F16\\u8BD1\\uFF0C\\u6240\\u4EE5\\u4E0D\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"webpack\"), \" \\u5355\\u72EC \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"loader\"), \" \\u5904\\u7406 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ts\"), \" \\u6587\\u4EF6\\u4E86\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"# babel \\u62D3\\u5C55 typescript \\u529F\\u80FD\\nyarn add -D @babel/preset-typescript typescript\\n\")), mdx(\"p\", null, \"\\u521B\\u5EFA \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tsconfig.json\"), \" \\u52A0\\u4E0A\\u4E00\\u4E9B\\u914D\\u7F6E\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\",\n \"metastring\": \"filename=tsconfig.json\",\n \"filename\": \"tsconfig.json\"\n }, \"{\\n \\\"compilerOptions\\\": {\\n \\\"module\\\": \\\"es6\\\", // \\u4EE3\\u7801\\u4F7F\\u7528\\u7684\\u6A21\\u5757\\u65B9\\u6848\\n \\\"target\\\": \\\"es5\\\", // \\u76EE\\u6807\\u8F6C\\u79FB\\u6210\\u4E3A\\u7684\\u4EE3\\u7801\\n \\\"jsx\\\": \\\"react\\\", // jsx \\u8BED\\u6CD5\\u600E\\u4E48\\u7F16\\u8BD1\\n \\\"noImplicitAny\\\": true, // \\u5141\\u8BB8\\u4E00\\u4E9B\\u9690\\u542B\\u7684 any\\n \\\"allowSyntheticDefaultImports\\\": true, // \\u5141\\u8BB8\\u4ECE\\u6CA1\\u6709\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u5BFC\\u51FA\\u7684\\u6A21\\u5757\\u4E2D\\u9ED8\\u8BA4\\u5BFC\\u5165\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"babel.config.json\"), \" \\u6587\\u4EF6:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\",\n \"metastring\": \"filename=babel.config.json add=8\",\n \"filename\": \"babel.config.json\",\n \"add\": \"8\"\n }, \" {\\n \\\"presets\\\": [\\n [\\n \\\"@babel/env\\\",\\n {...}\\n ],\\n \\\"@babel/preset-typescript\\\"\\n ],\\n \\\"plugins\\\": [...]\\n }\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"webpack\"), \" \\u4E2D\\u4E0D\\u9700\\u8981\\u518D\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ts-loader\"), \"\\uFF0C\\u53EA\\u9700\\u8981\\u6DFB\\u52A0\\u62D3\\u5C55\\u4E86\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\",\n \"metastring\": \"filename=webpack.config.js remove=7 add=8,14-16\",\n \"filename\": \"webpack.config.js\",\n \"remove\": \"7\",\n \"add\": \"8,14-16\"\n }, \" module.exports = {\\n entry: ...,\\n output: {...},\\n module: {\\n rules: [\\n {\\n test: /\\\\.js$/,\\n test: /\\\\.(tj)sx?$/,\\n exclude: /(node_modules|bower_components)/,\\n use: 'babel-loader'\\n }\\n ]\\n },\\n resolve: {\\n extensions: ['.tsx', '.ts', '.js']\\n },\\n };\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u5C31\\u53EF\\u4EE5\\u5728\\u81EA\\u5DF1\\u7684\\u4EE3\\u7801\\u4E2D\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ts\"), \" \\u6587\\u4EF6\\u4E86\"), mdx(\"h3\", null, \"2.6 React\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"# babel \\u62D3\\u5C55 react \\u529F\\u80FD\\nyarn add -D @babel/preset-react\\nyarn add react react-dom @types/react @types/react-dom\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"babel.config.json\"), \" \\u6587\\u4EF6:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\",\n \"metastring\": \"filename=babel.config.json add=8\",\n \"filename\": \"babel.config.json\",\n \"add\": \"8\"\n }, \" {\\n \\\"presets\\\": [\\n [\\n \\\"@babel/env\\\",\\n {...}\\n ],\\n \\\"@babel/preset-react\\\",\\n \\\"@babel/preset-typescript\\\"\\n ],\\n \\\"plugins\\\": [...]\\n }\\n\")), mdx(\"h3\", null, \"2.7 SCSS\"), mdx(\"p\", null, \"\\u6837\\u5F0F\\u6587\\u4EF6\\u4E5F\\u662F\\u4E0D\\u80FD\\u5C11\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"# \\u5B89\\u88C5 loader \\u548C\\u89E3\\u6790\\u5668\\uFF0C\\u52A0\\u4E0A style \\u548C css \\u53EF\\u4EE5\\u94FE\\u5F0F\\u52A0\\u8F7D\\nyarn add -D sass-loader style-loader css-loader node-sass\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\",\n \"metastring\": \"filename=webpack.config.js add=7-14\",\n \"filename\": \"webpack.config.js\",\n \"add\": \"7-14\"\n }, \" module.exports = {\\n entry: ...,\\n output: {...},\\n module: {\\n rules: [\\n {...},\\n {\\n test: /\\\\.scss$/,\\n use: [\\n \\\"style-loader\\\", // \\u5C06 JS \\u5B57\\u7B26\\u4E32\\u751F\\u6210\\u4E3A style \\u8282\\u70B9\\n \\\"css-loader\\\", // \\b\\u5C06 CSS \\u8F6C\\u5316\\u6210 CommonJS \\u6A21\\u5757\\n \\\"sass-loader\\\" // \\u5C06 Sass \\u7F16\\u8BD1\\u6210 CSS\\uFF0C\\u9ED8\\u8BA4\\u4F7F\\u7528 Node Sass\\n ]\\n },\\n ]\\n },\\n };\\n\")), mdx(\"h3\", null, \"2.8 ESLint\"), mdx(\"p\", null, \"\\u73B0\\u5728\\u7684\\u5F00\\u53D1\\uFF0CESLint \\u5BF9\\u4E8E\\u9AD8\\u8D28\\u91CF\\u7684\\u4EE3\\u7801\\u65F6\\u5FC5\\u4E0D\\u53EF\\u5C11\\u7684\\uFF0C\\u867D\\u7136\\u5F88\\u591A\\u53EF\\u4EE5\\u901A\\u8FC7\\u7F16\\u8F91\\u5668\\u6765\\u5B9E\\u73B0\\uFF0C\\u4F46\\u662F\\u53EF\\u6301\\u7EED\\u7684\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"yarn add -D eslint\\n\")), mdx(\"p\", null, \"eslint \\u7684\\u914D\\u7F6E\\u66F4\\u52A0\\u7B80\\u5355\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"eslint --init\\n\")), mdx(\"p\", null, \"\\u6309\\u7167\\u63D0\\u793A\\u9009\\u62E9\\u914D\\u7F6E\\u5373\\u53EF\\uFF0C\\u6700\\u540E\\u4F1A\\u81EA\\u52A8\\u751F\\u6210\\u914D\\u7F6E\\u6587\\u4EF6\\uFF0C\\u7136\\u540E\\u5B89\\u88C5\\u4F9D\\u8D56\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\",\n \"metastring\": \"filename=.eslintrc.js\",\n \"filename\": \".eslintrc.js\"\n }, \"module.exports = {\\n \\\"env\\\": {\\n \\\"browser\\\": true,\\n \\\"es6\\\": true\\n },\\n \\\"extends\\\": [\\n \\\"eslint:recommended\\\",\\n \\\"plugin:react/recommended\\\",\\n \\\"plugin:@typescript-eslint/eslint-recommended\\\"\\n ],\\n \\\"globals\\\": {\\n \\\"Atomics\\\": \\\"readonly\\\",\\n \\\"SharedArrayBuffer\\\": \\\"readonly\\\"\\n },\\n \\\"parser\\\": \\\"@typescript-eslint/parser\\\",\\n \\\"parserOptions\\\": {\\n \\\"ecmaFeatures\\\": {\\n \\\"jsx\\\": true\\n },\\n \\\"ecmaVersion\\\": 2018,\\n \\\"sourceType\\\": \\\"module\\\"\\n },\\n \\\"plugins\\\": [\\n \\\"react\\\",\\n \\\"@typescript-eslint\\\"\\n ],\\n \\\"rules\\\": {\\n }\\n};\\n\")), mdx(\"h2\", null, \"3\\u3001 \\u6700\\u540E\\u7684\\u6587\\u4EF6\"), mdx(\"p\", null, \"\\u6700\\u540E\\u518D\\u6DFB\\u52A0\\u81EA\\u5DF1\\u4E60\\u60EF\\u7684\\u547D\\u4EE4\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\",\n \"metastring\": \"filename=package.json\",\n \"filename\": \"package.json\"\n }, \"{\\n \\\"scripts\\\": {\\n \\\"lint\\\": \\\"npx eslint --ext .jsx,.js,.ts,.tsx ./src/\\\",\\n \\\"build\\\": \\\"webpack --config=./build/webpack.config.js\\\",\\n \\\"dev\\\": \\\"webpack-dev-server --devtool eval --progress --colors --hot --content-base build --config=./build/webpack.config.js\\\"\\n },\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\",\n \"metastring\": \"filename=babel.config.json\",\n \"filename\": \"babel.config.json\"\n }, \"{\\n \\\"presets\\\": [\\n [\\n \\\"@babel/env\\\",\\n {\\n \\\"targets\\\": \\\">5%\\\",\\n \\\"useBuiltIns\\\": false\\n }\\n ],\\n \\\"@babel/preset-react\\\",\\n \\\"@babel/preset-typescript\\\"\\n ],\\n \\\"plugins\\\": [\\n [\\n \\\"@babel/plugin-transform-runtime\\\",\\n {\\n \\\"corejs\\\": 3,\\n \\\"useESModules\\\": true\\n }\\n ]\\n ]\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\",\n \"metastring\": \"filename=build/webpack.config.js\",\n \"filename\": \"build/webpack.config.js\"\n }, \"var path = require(\\\"path\\\");\\nconst HtmlWebpackPlugin = require(\\\"html-webpack-plugin\\\");\\n\\nmodule.exports = {\\n entry: path.resolve(__dirname, \\\"../src/index.tsx\\\"),\\n output: {\\n path: path.resolve(__dirname, \\\"../build\\\"),\\n filename: \\\"bundle.js\\\"\\n },\\n plugins: [new HtmlWebpackPlugin({ template: \\\"./src/template/index.ejs\\\" })],\\n module: {\\n rules: [\\n {\\n test: /\\\\.(j|t)sx?$/,\\n exclude: /(node_modules|bower_components)/,\\n use: 'babel-loader'\\n },\\n {\\n test: /\\\\.scss$/,\\n use: [\\n \\\"style-loader\\\",\\n \\\"css-loader\\\",\\n \\\"sass-loader\\\"\\n ]\\n },\\n ]\\n },\\n resolve: {\\n extensions: ['.tsx', '.ts', '.js']\\n },\\n};\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\",\n \"metastring\": \"filename=tsconfig.json\",\n \"filename\": \"tsconfig.json\"\n }, \"{\\n \\\"compilerOptions\\\": {\\n \\\"module\\\": \\\"es6\\\",\\n \\\"target\\\": \\\"es5\\\",\\n \\\"jsx\\\": \\\"react\\\",\\n \\\"noImplicitAny\\\": true,\\n \\\"allowSyntheticDefaultImports\\\": true,\\n }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\",\n \"metastring\": \"filename=.eslintrc.js\",\n \"filename\": \".eslintrc.js\"\n }, \"module.exports = {\\n \\\"env\\\": {\\n \\\"browser\\\": true,\\n \\\"es6\\\": true\\n },\\n \\\"extends\\\": [\\n \\\"eslint:recommended\\\",\\n \\\"plugin:react/recommended\\\",\\n \\\"plugin:@typescript-eslint/eslint-recommended\\\"\\n ],\\n \\\"globals\\\": {\\n \\\"Atomics\\\": \\\"readonly\\\",\\n \\\"SharedArrayBuffer\\\": \\\"readonly\\\"\\n },\\n \\\"parser\\\": \\\"@typescript-eslint/parser\\\",\\n \\\"parserOptions\\\": {\\n \\\"ecmaFeatures\\\": {\\n \\\"jsx\\\": true\\n },\\n \\\"ecmaVersion\\\": 2018,\\n \\\"sourceType\\\": \\\"module\\\"\\n },\\n \\\"plugins\\\": [\\n \\\"react\\\",\\n \\\"@typescript-eslint\\\"\\n ],\\n \\\"rules\\\": {\\n }\\n};\\n\")), mdx(\"hr\", null), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"yarn dev\\n\")), mdx(\"p\", null, \"\\u6253\\u5B8C\\u6536\\u5DE5\\uFF01\\u96BE\\u5417\\uFF1F\\u4E0D\\u96BE\\uFF01\\u4E0D\\u96BE\\u5417\\uFF1F\\u592A\\u5357\\u4E86\\uFF01\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"24c013f9-6ca3-5c34-86f6-7c15b7f321b5","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/database-and-sql/database-and-sql.md","id":"ab0ef5c6-d8c2-5d3a-b4d2-9a7ad1aaf49e","parent":{"name":"database-and-sql","sourceInstanceName":"blog"},"excerpt":"想分享的是数据库相关的基本知识和 SQL 的相关概念，完备的回顾下相关能力，温故知新~~~ 刚开始写代码自学的时候，目的就是做网站，所以接触了很多的后台 PHP 和数据库相关的能力，工作中很长一段也承担了中间层和后台管理系统的搭建，所以可以说挺熟悉的。但是没有完备系统的整理过数据库的相关能力，平时 SQL 查询没问题，但是一旦跟别人讨论就变得没法十分确定了，这里整理一下，温故知新~ 一、数据库 Database、DB 是数据库，我们平时叫的数据库，更多表示数据库管理系统（Database…","fields":{"title":"📃 数据库和 SQL","slug":"/blog/database-and-sql","description":"数据库在日常开发中接触很多，其中的存储思想和方法对于数据和接口的理解大有裨益，虽然很多端侧开发可能不会直接接触，但是系统的了解下是很有必要的。","date":"2020-04-10","redirects":null,"datetime":"2020-04-10 20:49:53","categories":["code"],"series":null,"tags":["SQL","整理","数据库"],"status":"online"},"frontmatter":{"published":null,"tags":["SQL","整理","数据库"],"theme":null,"slug":"database-and-sql","date":"2020-04-10 20:49:53"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"database-and-sql\",\n \"title\": \"📃 数据库和 SQL\",\n \"date\": \"2020-04-10 20:49:53\",\n \"author\": \"Ubug\",\n \"description\": \"数据库在日常开发中接触很多，其中的存储思想和方法对于数据和接口的理解大有裨益，虽然很多端侧开发可能不会直接接触，但是系统的了解下是很有必要的。\",\n \"categories\": [\"code\"],\n \"tags\": [\"SQL\", \"整理\", \"数据库\"],\n \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u6570\\u636E\\u5E93\\u76F8\\u5173\\u7684\\u57FA\\u672C\\u77E5\\u8BC6\\u548C SQL \\u7684\\u76F8\\u5173\\u6982\\u5FF5\\uFF0C\\u5B8C\\u5907\\u7684\\u56DE\\u987E\\u4E0B\\u76F8\\u5173\\u80FD\\u529B\\uFF0C\\u6E29\\u6545\\u77E5\\u65B0~~~\")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u521A\\u5F00\\u59CB\\u5199\\u4EE3\\u7801\\u81EA\\u5B66\\u7684\\u65F6\\u5019\\uFF0C\\u76EE\\u7684\\u5C31\\u662F\\u505A\\u7F51\\u7AD9\\uFF0C\\u6240\\u4EE5\\u63A5\\u89E6\\u4E86\\u5F88\\u591A\\u7684\\u540E\\u53F0 PHP \\u548C\\u6570\\u636E\\u5E93\\u76F8\\u5173\\u7684\\u80FD\\u529B\\uFF0C\\u5DE5\\u4F5C\\u4E2D\\u5F88\\u957F\\u4E00\\u6BB5\\u4E5F\\u627F\\u62C5\\u4E86\\u4E2D\\u95F4\\u5C42\\u548C\\u540E\\u53F0\\u7BA1\\u7406\\u7CFB\\u7EDF\\u7684\\u642D\\u5EFA\\uFF0C\\u6240\\u4EE5\\u53EF\\u4EE5\\u8BF4\\u633A\\u719F\\u6089\\u7684\\u3002\\u4F46\\u662F\\u6CA1\\u6709\\u5B8C\\u5907\\u7CFB\\u7EDF\\u7684\\u6574\\u7406\\u8FC7\\u6570\\u636E\\u5E93\\u7684\\u76F8\\u5173\\u80FD\\u529B\\uFF0C\\u5E73\\u65F6 SQL \\u67E5\\u8BE2\\u6CA1\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u4E00\\u65E6\\u8DDF\\u522B\\u4EBA\\u8BA8\\u8BBA\\u5C31\\u53D8\\u5F97\\u6CA1\\u6CD5\\u5341\\u5206\\u786E\\u5B9A\\u4E86\\uFF0C\\u8FD9\\u91CC\\u6574\\u7406\\u4E00\\u4E0B\\uFF0C\\u6E29\\u6545\\u77E5\\u65B0~\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u6570\\u636E\\u5E93\"), mdx(\"p\", null, \"Database\\u3001DB \\u662F\\u6570\\u636E\\u5E93\\uFF0C\\u6211\\u4EEC\\u5E73\\u65F6\\u53EB\\u7684\\u6570\\u636E\\u5E93\\uFF0C\\u66F4\\u591A\\u8868\\u793A\\u6570\\u636E\\u5E93\\u7BA1\\u7406\\u7CFB\\u7EDF\\uFF08Database Management System\\uFF0CDBMS\\uFF09\\uFF0C\\u4F8B\\u5982 Mysql\\u3001Sqlite\\u3001Oracle\\u3001dBASE\\u3001PostgreSQL \\u7B49\\u7B49\\u975E\\u5E38\\u591A\\u3002\"), mdx(\"p\", null, \"\\u6570\\u636E\\u5E93\\u7684\\u6982\\u5FF5\\u5176\\u5B9E\\u53EA\\u8981\\u80FD\\u591F\\u7CFB\\u7EDF\\u7684\\u5B58\\u50A8\\u548C\\u8BFB\\u53D6\\u6570\\u636E\\u5C31\\u80FD\\u88AB\\u79F0\\u4E3A\\u6570\\u636E\\u5E93\\uFF0C\\u4F8B\\u5982\\u5F3A\\u8FEB\\u75C7\\u7684\\u786C\\u76D8\\uFF0C\\u5206\\u95E8\\u522B\\u7C7B\\u7684\\u5B58\\u50A8\\u5404\\u79CD\\u6587\\u4EF6\\uFF0C\\u60F3\\u627E\\u67D0\\u4E2A\\u8D44\\u6599\\uFF0C\\u4E09\\u4E24\\u4E0B\\u70B9\\u51FB\\u5C31\\u80FD\\u627E\\u51FA\\u6765\\uFF0C\\u8FD9\\u4E5F\\u7B97\\u662F\\u4E00\\u4E2A\\u6570\\u636E\\u5E93\\u3002\\u8FD9\\u4E2A\\u4E8B\\u60C5\\u4EA4\\u7ED9\\u7A0B\\u5E8F\\u505A\\uFF0C\\u80FD\\u591F\\u66F4\\u5FEB\\u66F4\\u597D\\u7684\\u65B0\\u589E\\u3001\\u66F4\\u65B0\\u3001\\u67E5\\u8BE2\\u3001\\u5220\\u9664\\u7B49\\u64CD\\u4F5C\\uFF0C\\u6D89\\u53CA\\u5230\\u5B58\\u50A8\\u8BBE\\u8BA1\\u3001\\u5065\\u58EE\\u53EF\\u9760\\u6027\\u3001\\u7B97\\u6CD5\\u3001\\u5404\\u79CD\\u80FD\\u529B\\u3001\\u4EE3\\u6570\\u96C6\\u5408\\u6570\\u5B66\\u7B49\\u975E\\u5E38\\u591A\\u7684\\u8003\\u8651\\uFF0C\\u8FD9\\u662F\\u4E00\\u4E2A\\u6210\\u719F\\u6570\\u636E\\u5E93\\u7684\\u672C\\u8D28\\u3002\"), mdx(\"h3\", null, \"1.1 \\u6570\\u636E\\u5E93\\u7684\\u5206\\u7C7B\"), mdx(\"p\", null, \"\\u4E00\\u822C\\u610F\\u4E49\\u4E0A\\u5206\\u7C7B\\u4E3B\\u8981\\u8BF4\\u7684\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\"), \"(Relational database) \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u975E\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\"), \"(Not Only SQL) \\u7B49\\uFF0C\\u8FD9\\u91CC\\u4E5F\\u4E0D\\u5EF6\\u4F38\\u5176\\u4ED6\\u7C7B\\u578B\\u7684\\u5B58\\u50A8\\u5206\\u7C7B\\u3002\"), mdx(\"h4\", null, \"1.1.1 \\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\"), mdx(\"p\", null, \"\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u5173\\u7CFB\"), \" \\u4E3B\\u8981\\u6307\\u7684\\u662F\\u6570\\u636E\\u4E4B\\u95F4\\u7684\\u5173\\u7CFB\\u6A21\\u578B\\uFF0C\\u7528\\u7ED3\\u6784\\u5316\\u7684\\u4FE1\\u606F\\u5B58\\u50A8\\u65B9\\u5F0F\\u6765\\u5B89\\u6392\\u6570\\u636E\\u7684\\u5B58\\u50A8\\uFF0C\\u4E5F\\u5C31\\u662F\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u5B57\\u6BB5\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u8BB0\\u5F55\"), \" \\u4E24\\u4E2A\\u6982\\u5FF5\\u786E\\u5B9A\\u6BCF\\u4E00\\u4E2A\\u6570\\u636E\\uFF0C\\u6BD4\\u5982\\u73ED\\u7EA7\\u6210\\u7EE9\\u7684\\u6570\\u636E\\uFF0C\\u5C31\\u53EF\\u4EE5\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u5C0F\\u660E(\\u8BB0\\u5F55)\\u7684\\u8BED\\u6587\\u6210\\u7EE9(\\u5B57\\u6BB5)\"), \"\\uFF0C\\u6765\\u627E\\u5230\\u5177\\u4F53\\u7684\\u6570\\u503C\\u3002\"), mdx(\"p\", null, \"\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\\u7684\\u7406\\u89E3\\u548C\\u4F7F\\u7528\\u975E\\u5E38\\u7B80\\u5355\\uFF0C\\u5B58\\u50A8\\u5173\\u7CFB\\u4E5F\\u66F4\\u5BB9\\u6613\\u5B9E\\u73B0\\uFF0C\\u6240\\u4EE5\\u76EE\\u524D\\u5927\\u591A\\u6570\\u636E\\u5E93\\u90FD\\u662F\\u4F7F\\u7528\\u7684\\u8FD9\\u4E2A\\u6A21\\u578B\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u7ECF\\u5178\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Mysql\"), \" \\u4F34\\u968F\\u7740 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"PHP\"), \" \\u7684\\u53D1\\u5C55\\u5728 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Web2.0\"), \" \\u9AD8\\u901F\\u53D1\\u5C55\\u7684\\u9636\\u6BB5\\u88AB\\u5E7F\\u6CDB\\u8FD0\\u7528\\uFF0C\\u76F4\\u81F3\\u73B0\\u5728\\u4F9D\\u7136\\u5360\\u636E\\u5F88\\u5927\\u7684\\u5E02\\u573A\\u3002\"), mdx(\"p\", null, \"\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93 \\u548C\\u5176\\u5BF9\\u5E94\\u7684\\u67E5\\u8BE2\\u8BED\\u8A00 SQL \\u4E5F\\u662F\\u672C\\u7BC7\\u6587\\u7AE0\\u91CD\\u70B9\\u8BA8\\u8BBA\\u7684\\u5185\\u5BB9\\u3002\"), mdx(\"h4\", null, \"1.1.2 NoSQL\"), mdx(\"p\", null, \"\\u975E\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\\u7684\\u6982\\u5FF5\\u6BD4\\u8F83\\u5BBD\\u6CDB\\uFF0C\\u800C\\u4E14\\u5B9E\\u73B0\\u548C\\u4FA7\\u91CD\\u90FD\\u6709\\u4E0D\\u540C\\uFF0C\\u76EE\\u524D\\u6765\\u8BF4 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u975E\\u5173\\u7CFB\"), \" \\u5E76\\u4E0D\\u8868\\u793A\\u6CA1\\u6709\\u5173\\u7CFB\\uFF0C\\u800C\\u662F Not Only SQL \\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u8868\\u793A\\u5173\\u7CFB\\u7684\\u610F\\u601D\\uFF0C\\u5927\\u90E8\\u5206\\u7279\\u70B9\\u5728\\u4E8E\\u975E\\u5173\\u7CFB\\u578B\\u3001\\u5206\\u5E03\\u5F0F\\u3001\\u5F00\\u6E90\\u3001\\u6C34\\u5E73\\u53EF\\u6269\\u5C55\\u3001\\u9AD8\\u8BFB\\u589E\\u6027\\u80FD\\u3002\"), mdx(\"p\", null, \"\\u73B0\\u4EE3\\u4E92\\u8054\\u7F51\\u7684\\u53D1\\u5C55\\uFF0C\\u5BFC\\u81F4\\u6570\\u636E\\u91CF\\u5927\\u5E45\\u4E0A\\u5347\\uFF0C\\u4F20\\u7EDF\\u7684\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\\u7531\\u4E8E\\u9700\\u8981\\u4FDD\\u8BC1\\u8054\\u5408\\u67E5\\u8BE2\\u548C\\u4E00\\u81F4\\u6027\\uFF0C\\u89C4\\u8303\\u5DF2\\u7ECF\\u4E0D\\u80FD\\u6EE1\\u8DB3\\u4F7F\\u7528\\u9700\\u6C42\\u4E86\\u3002\\u5305\\u62EC\\u5206\\u5E03\\u5F0F\\u3001\\u4E3B\\u4ECE\\u3001\\u51B7\\u70ED\\u591A\\u5730\\u7B49\\u624B\\u6BB5\\u6EE1\\u8DB3\\u4F7F\\u7528\\uFF0C\\u4F46\\u662F\\u7EF4\\u62A4\\u6027\\u548C\\u6269\\u5C55\\u6027\\u4E5F\\u5728\\u964D\\u4F4E\\u3002\\u6570\\u636E\\u7684\\u5B58\\u50A8\\u9700\\u6C42\\u613F\\u610F\\u727A\\u7272\\u4E00\\u90E8\\u5206\\u4F53\\u9A8C\\u6765\\u83B7\\u5F97\\u53E6\\u4E00\\u90E8\\u5206\\u7684\\u80FD\\u529B\\u63D0\\u5347\\uFF0C\\u6BD4\\u5982\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u9AD8\\u6027\\u80FD\\u5E76\\u53D1\\u8BFB\\u5199\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u6D77\\u91CF\\u6570\\u636E\\u8BBF\\u95EE\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\u53EF\\u62D3\\u5C55\\u6027\\u5206\\u5E03\\u5F0F\"), \"\\u7B49\\u90FD\\u662F\\u65B0\\u7684\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u65B0\\u9700\\u6C42\\u4E0B\\u7684\\u6570\\u636E\\u5E93\\u5F62\\u5F0F\\u5C31\\u662F\\u4EE5 Redis \\u548C MongoDB \\u4E3A\\u4EE3\\u8868\\u7684\\u8FD9\\u4E9B\\u4EA7\\u54C1\\uFF0C\\u5927\\u591A\\u5F00\\u6E90\\u6027\\u80FD\\u597D\\uFF0C\\u80FD\\u591F\\u6EE1\\u8DB3\\u5F88\\u591A\\u65B0\\u7684\\u5B58\\u50A8\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u5728\\u8BFB\\u53D6\\u548C\\u65B0\\u589E\\u6570\\u636E\\u4E0A\\u6027\\u80FD\\u66F4\\u597D\\u3002\\u4F46\\u662F\\u5728\\u727A\\u7272\\u6BD4\\u5982\\u4E00\\u81F4\\u6027\\u3001\\u67E5\\u8BE2\\u6027\\u80FD\\u7684\\u6761\\u4EF6\\u4E0B\\uFF0C\\u9762\\u5BF9\\u590D\\u6742\\u7EDF\\u8BA1\\u3001\\u4E00\\u81F4\\u6027\\u3001\\u4E8B\\u52A1\\u652F\\u6301\\u7B49\\u9700\\u6C42\\u65F6\\uFF0C\\u81EA\\u7136\\u6CA1\\u6709\\u5173\\u7CFB\\u578B\\u66F4\\u597D\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u65E0\\u8BBA\\u662F\\u5173\\u7CFB\\u578B\\u8FD8\\u662F\\u975E\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\\uFF0C\\u9002\\u5408\\u4E1A\\u52A1\\u7684\\u624D\\u662F\\u6B63\\u786E\\u7684\\u9009\\u62E9\\uFF0C\\u6838\\u5FC3\\u9700\\u8981\\u4E00\\u81F4\\u6027\\u3001\\u8F83\\u5C0F\\u91CF\\u7684\\u6570\\u636E\\u53EF\\u4EE5\\u7528\\u5173\\u7CFB\\u578B\\uFF0C\\u975E\\u7ED3\\u6784\\u5316\\u6570\\u636E\\u548C\\u6027\\u80FD\\u8981\\u6C42\\u8F83\\u9AD8\\u7684\\u53EF\\u4EE5\\u8003\\u8651\\u975E\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\\u3002\"), mdx(\"h3\", null, \"1.2 \\u73B0\\u4EE3\\u6570\\u636E\\u5E93\\u7684\\u6311\\u6218\"), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u90FD\\u4E0D\\u5728\\u5C55\\u5F00\\u4E86\\uFF0C\\u90FD\\u5F88\\u5BB9\\u6613\\u7406\\u89E3\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6D77\\u91CF\\u6570\\u636E\\u548C\\u5206\\u5E03\\u5F0F\\u5B58\\u50A8\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9AD8\\u5E76\\u53D1\\u8BFB\\u5199\\u548C\\u6027\\u80FD\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6613\\u6269\\u5C55\\u548C\\u7075\\u6D3B\\u7684\\u6570\\u636E\\u6A21\\u578B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9AD8\\u53EF\\u7528\")), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u5143\\u7D20\\u662F\\u65B0\\u7684\\u9700\\u6C42\\uFF0C\\u5728\\u8FD9\\u4E9B\\u9700\\u6C42\\u4E0B\\u6EE1\\u8DB3 ACID \\u7684\\u8981\\u7D20\\u662F\\u96BE\\u70B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Atomicity \\u539F\\u5B50\\u6027\"), \"\\uFF1A\\u6307\\u4E8B\\u52A1\\u662F\\u4E00\\u4E2A\\u4E0D\\u53EF\\u518D\\u5206\\u5272\\u7684\\u5DE5\\u4F5C\\u5355\\u5143\\uFF0C\\u4E8B\\u52A1\\u4E2D\\u7684\\u64CD\\u4F5C\\u8981\\u4E48\\u90FD\\u53D1\\u751F\\uFF0C\\u8981\\u4E48\\u90FD\\u4E0D\\u53D1\\u751F\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Consistency \\u4E00\\u81F4\\u6027\"), \"\\uFF1A\\u4E8B\\u52A1\\u5F00\\u59CB\\u4E4B\\u524D\\u548C\\u4E8B\\u52A1\\u7ED3\\u675F\\u4EE5\\u540E\\uFF0C\\u6570\\u636E\\u5E93\\u7684\\u5B8C\\u6574\\u6027\\u7EA6\\u675F\\u6CA1\\u6709\\u88AB\\u7834\\u574F\\u3002\\u8FD9\\u662F\\u8BF4\\u6570\\u636E\\u5E93\\u4E8B\\u52A1\\u4E0D\\u80FD\\u7834\\u574F\\u5173\\u7CFB\\u6570\\u636E\\u7684\\u5B8C\\u6574\\u6027\\u4EE5\\u53CA\\u4E1A\\u52A1\\u903B\\u8F91\\u4E0A\\u7684\\u4E00\\u81F4\\u6027\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Isolation \\u9694\\u79BB\\u6027\"), \"\\uFF1A\\u591A\\u4E2A\\u4E8B\\u52A1\\u5E76\\u53D1\\u8BBF\\u95EE\\u65F6\\uFF0C\\u4E8B\\u52A1\\u4E4B\\u95F4\\u662F\\u9694\\u79BB\\u7684\\uFF0C\\u4E00\\u4E2A\\u4E8B\\u52A1\\u4E0D\\u5E94\\u8BE5\\u5F71\\u54CD\\u5176\\u5B83\\u4E8B\\u52A1\\u8FD0\\u884C\\u6548\\u679C\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Durability \\u6301\\u4E45\\u6027\"), \"\\uFF1A\\u5BF9\\u6570\\u636E\\u5E93\\u6240\\u4F5C\\u7684\\u66F4\\u6539\\u4FBF\\u6301\\u4E45\\u7684\\u4FDD\\u5B58\\u5728\\u6570\\u636E\\u5E93\\u4E4B\\u4E2D\\u3002\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u6570\\u636E\\u5E93\\u7684\\u6F14\\u8FDB\"), mdx(\"p\", null, \"\\u518D\\u591A\\u7684\\u7406\\u8BBA\\u4E5F\\u4E0D\\u5982\\u5B9E\\u4F8B\\u6F14\\u8FDB\\u770B\\u8D77\\u6765\\u8212\\u670D\\uFF0C\\u4EE5\\u901A\\u5E38\\u7684\\u7535\\u5546\\u4E1A\\u52A1\\u4E3A\\u4F8B\\u3002\"), mdx(\"h3\", null, \"1. \\u5355\\u673A\\u670D\\u52A1\"), mdx(\"p\", null, \"\\u65E0\\u8BBA\\u4EC0\\u4E48\\u65F6\\u5019\\uFF0C\\u5982\\u679C\\u4F60\\u7684\\u4E1A\\u52A1\\u73B0\\u5728\\u53EF\\u63A7\\uFF0C\\u5355\\u673A\\u670D\\u52A1\\u6C38\\u8FDC\\u662F\\u6700\\u5FEB\\u7684\\u5B9E\\u73B0\\u8DEF\\u5F84\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u6570\\u636E\\u5E93\\u5305\\u542B\\u4E86\\u7528\\u6237\\u3001\\u5546\\u54C1\\u3001\\u8BA2\\u5355\\u7B49\\u6570\\u636E\\u8868\\uFF0C\\u7075\\u6D3B\\u53EF\\u63A7\\uFF0C\\u67E5\\u8BE2\\u548C\\u5199\\u5165\\u90FD\\u4E0D\\u4F1A\\u6D89\\u53CA\\u5230\\u590D\\u6742\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"->\\n +------------------------------------------------------------------+\\n | SERVER |\\n | +---------------------------------------+ +--------------+ |\\n | | DB | | API Server | |\\n | | +------+ +-------+ +--------+ | | | |\\n | | | user | | goods | | trades | | +-> | ...... | |\\n | | | | | | | | ... | | | |\\n | | | | | | | | | <-+ | | |\\n | | | | | | | | | | | |\\n | | +------+ +-------+ +--------+ | | | |\\n | +---------------------------------------+ +--------------+ |\\n +------------------------------------------------------------------+\\n\")), mdx(\"p\", null, \"\\u6BCF\\u5929\\u7684\\u7528\\u6237\\u8BBF\\u95EE\\u5E76\\u4E0D\\u4F1A\\u5BF9\\u6570\\u636E\\u5E93\\u9020\\u6210\\u592A\\u5927\\u7684\\u538B\\u529B\\uFF0C\\u5728\\u53D1\\u5C55\\u521D\\u671F\\u8FD9\\u4E2A\\u9009\\u62E9\\u662F\\u6CA1\\u95EE\\u9898\\u7684\\u3002\"), mdx(\"h3\", null, \"2. \\u8BFB\\u5199\\u5206\\u79BB\"), mdx(\"p\", null, \"\\u67E5\\u8BE2\\u548C\\u5199\\u5165\\u5728\\u6570\\u636E\\u5E93\\u4E2D\\u662F\\u4E24\\u79CD\\u4E1A\\u52A1\\u5F62\\u6001\\uFF0C\\u67E5\\u8BE2\\u5927\\u90E8\\u5206\\u6BD4\\u5199\\u5165\\u591A\\u5F97\\u591A\\uFF0C\\u6240\\u4EE5\\u53EF\\u4EE5\\u8003\\u8651\\u5C06\\u67E5\\u8BE2\\u7684\\u6D41\\u91CF\\u62C6\\u5206\\uFF0C\\u4E5F\\u5C31\\u662F\\u6269\\u5C55\\u591A\\u4E2A\\u53EA\\u8BFB\\u6570\\u636E\\u5E93\\u4F5C\\u4E3A\\u4ECE\\u6570\\u636E\\u6E90\\uFF0C\\u4ECE\\u4E3B\\u6570\\u636E\\u5E93\\u540C\\u6B65\\u6570\\u636E\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"->\\n +-------------------------------+ +-------------------------------+\\n | SERVER MASTER | | SERVER SLAVE 1 (READ ONLY) |\\n | +-------------------------+ | | +-------------------------+ |\\n | | DB | | | | DB | |\\n | | +------+ +-------+ | | +---> | | +------+ +-------+ | |\\n | | | user | | goods | | | | | | user | | goods | | |\\n | | | | | | ... | | | | | | | | ... | |\\n | | | | | | | | <---+ | | | | | | | |\\n | | | | | | | | | | | | | | | |\\n | | +------+ +-------+ | | | | +------+ +-------+ | |\\n | +-------------------------+ | | +-------------------------+ |\\n +-------------------------------+ +-------------------------------+\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u80FD\\u591F\\u5C06\\u5F88\\u591A\\u7684\\u8BFB\\u67E5\\u8BE2\\u5206\\u5230\\u5F88\\u591A\\u7684\\u670D\\u52A1\\u5668\\u4E0A\\uFF0C\\u52A0\\u4E0A\\u8D1F\\u8F7D\\u5747\\u8861\\uFF0C\\u80FD\\u591F\\u6EE1\\u8DB3\\u4E1A\\u52A1\\u521D\\u671F\\u9636\\u6BB5\\u67E5\\u8BE2\\u8BF7\\u6C42\\u91CF\\u6FC0\\u589E\\u7684\\u95EE\\u9898\\uFF0C\\u7B97\\u662F\\u5206\\u5E03\\u5F0F\\u521D\\u7EA7\\u529F\\u80FD\\u3002\"), mdx(\"h3\", null, \"2. \\u5206\\u5E93\"), mdx(\"p\", null, \"\\u4E00\\u6BB5\\u65F6\\u95F4\\u540E\\u4E1A\\u52A1\\u91CF\\u4E0A\\u6765\\u4E86\\uFF0C\\u4EA4\\u6613\\u91CF\\u53D8\\u5927\\u4E86\\u3001\\u8BA2\\u5355\\u53D8\\u591A\\u4E86\\uFF0C\\u4E00\\u4E2A\\u670D\\u52A1\\u5668\\u6CA1\\u529E\\u6CD5\\u627F\\u8F7D\\u5B58\\u50A8\\u3001\\u8BA1\\u7B97\\u6216\\u8005\\u5E26\\u5BBD\\u4E86\\uFF0C\\u5C31\\u7B97\\u62C6\\u5206\\u8BFB\\u5199\\u4E5F\\u89E3\\u51B3\\u4E0D\\u4E86\\u6BCF\\u4E00\\u4E2A\\u5B9E\\u4F8B\\u90FD\\u5728\\u81A8\\u80C0\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u65F6\\u5019\\u4E5F\\u5F88\\u5BB9\\u6613\\u7684\\u53D1\\u73B0\\uFF0C\\u5546\\u54C1\\u3001\\u7528\\u6237\\u548C\\u8BA2\\u5355\\u4E4B\\u95F4\\u7684\\u4E1A\\u52A1\\u5173\\u8054\\u6027\\u6CA1\\u6709\\u90A3\\u4E48\\u5927\\uFF0C\\u5305\\u62EC\\u4E2D\\u95F4\\u5C42\\u548C\\u6570\\u636E\\u5E93\\uFF0C\\u90FD\\u53EF\\u4EE5\\u62C6\\u5206\\u5230\\u4E0D\\u540C\\u7684\\u670D\\u52A1\\u5668\\u4E0A\\uFF0C\\u4EE5\\u6B64\\u5C06\\u603B\\u7684\\u8BF7\\u6C42\\u5206\\u522B\\u5206\\u6D41\\u5230\\u51E0\\u53F0\\u673A\\u5668\\u4E0A\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"->\\n +----------------+ +-----------------+ +------------------+\\n | SERVER 1 | | SERVER 2 | | SERVER 3 |\\n | +----------+ | | +-----------+ | | +------------+ |\\n | | DB | | | | DB | | | | DB | |\\n | | +------+ | | | | +-------+ | | | | +--------+ | |\\n | | | user | | | | | | goods | | | | | | trades | | |\\n | | | | | | | | | | | | | | | | | |\\n | | | | | | | | | | | | | | | | | |\\n | | | | | | | | | | | | | | | | | |\\n | | +------+ | | | | +-------+ | | | | +--------+ | |\\n | +----------+ | | +-----------+ | | +------------+ |\\n +----------------+ +-----------------+ +------------------+\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u6211\\u4EEC\\u5728\\u4E1A\\u52A1\\u4E2D\\u7684\\u5F71\\u54CD\\u4E0D\\u4F1A\\u592A\\u5927\\uFF0C\\u6570\\u636E\\u7684\\u83B7\\u53D6\\u901A\\u8FC7\\u4E0D\\u540C\\u7684\\u63A5\\u53E3\\u6765\\u62FF\\uFF0C\\u8BF7\\u6C42\\u548C\\u67E5\\u8BE2\\u4E0D\\u4F1A\\u538B\\u5728\\u4E00\\u53F0\\u670D\\u52A1\\u5668\\u4E0A\\uFF0C\\u6B64\\u65F6\\u80FD\\u591F\\u6EE1\\u8DB3\\u6211\\u4EEC\\u7684\\u9700\\u6C42\\u4E86\\uFF0C\\u8FD9\\u4E5F\\u7B97\\u662F\\u5206\\u5E03\\u5F0F\\u7684\\u96CF\\u5F62\\u4E86\\u3002\"), mdx(\"h3\", null, \"3. \\u5206\\u8868\"), mdx(\"p\", null, \"\\u4E0D\\u540C\\u4E1A\\u52A1\\u7684\\u67E5\\u8BE2\\u8BF7\\u6C42\\u548C\\u8BA1\\u7B97\\u80FD\\u529B\\u4E0D\\u5728\\u5C40\\u9650\\u5728\\u4E00\\u53F0\\u673A\\u5668\\uFF0C\\u4F46\\u662F\\u597D\\u50CF\\u6570\\u636E\\u91CF\\u53D8\\u5927\\u7684\\u95EE\\u9898\\u4F9D\\u7136\\u6CA1\\u6709\\u89E3\\u51B3\\uFF0C\\u7528\\u6237\\u6CE8\\u518C\\u91CF\\u6FC0\\u589E\\u3001\\u4EA4\\u6613\\u8BB0\\u5F55\\u53D8\\u5927\\uFF0C\\u4E00\\u4E2A\\u6570\\u636E\\u8868\\u53D8\\u5F97\\u5DE8\\u957F\\u65E0\\u6BD4\\uFF0C\\u67E5\\u8BE2\\u6548\\u7387\\u4E5F\\u5F88\\u53D7\\u5F71\\u54CD\\u3002\"), mdx(\"p\", null, \"\\u4E8E\\u662F\\u6211\\u4EEC\\u5C06\\u540C\\u4E00\\u4E2A\\u6570\\u636E\\u8868\\u518D\\u62C6\\u5206\\u5230\\u4E0D\\u540C\\u7684\\u670D\\u52A1\\u5668\\u7684\\u4E0D\\u540C\\u6570\\u636E\\u5E93\\u4E2D\\uFF0C\\u7528 hash \\u7684\\u65B9\\u5F0F\\u6765\\u6620\\u5C04\\u67E5\\u8BE2\\uFF0C\\u6BD4\\u5982\\u7528\\u6237 id \\u5C3E\\u53F7\\u4E3A hash \\u51FD\\u6570\\uFF0C\\u80FD\\u591F\\u5C06\\u7528\\u6237\\u6570\\u636E\\u62C6\\u5206\\u5230 10 \\u4E2A\\u6570\\u636E\\u5E93\\u673A\\u5668\\u4E2D\\uFF0C\\u5206\\u522B\\u5206\\u62C5\\u6570\\u636E\\u91CF\\u548C\\u8BF7\\u6C42\\u67E5\\u8BE2\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"->\\n+----------------+\\n| SERVER |\\n| +-----------+ |\\n| | DB | | +----------------+ +-----------------+ +-----------------+\\n| | +-------+ | | | SERVER 1 | | SERVER 2 | | SERVER 3 |\\n| | | user1 | | | | +-----------+ | | +-----------+ | | +-----------+ |\\n| | | | | | | | DB | | | | DB | | | | DB | |\\n| | | | | | | | +-------+ | | | | +-------+ | | | | +-------+ | |\\n| | | | | | +------> | | | user1 | | | | | | user2 | | | | | | user3 | | |\\n| | | | | | | | | | | | | | | | | | | | | | | |\\n| | | | | | | | | | | | | | | | | | | | | | | |\\n| | | | | | | | | | | | | | | | | | | | | | | |\\n| | | | | | | | +-------+ | | | | +-------+ | | | | +-------+ | |\\n| | | | | | | +-----------+ | | +-----------+ | | +-----------+ |\\n| | | ... | | | +----------------+ +-----------------+ +-----------------+\\n| | | ... | | | \\n| | +-------+ | |\\n| +-----------+ |\\n+----------------+\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u6211\\u4EEC\\u5C31\\u5C06\\u6574\\u4E2A\\u6570\\u636E\\u5E93\\u4ECE\\u5355\\u53F0\\u673A\\u5668\\uFF0C\\u53D8\\u6210\\u4E86\\u7528\\u6237\\u4FE1\\u606F\\u5206\\u5E03\\u5230\\u4E86\\u4E0D\\u540C\\u7684\\u670D\\u52A1\\u5668\\u7684\\u4E0D\\u540C\\u6570\\u636E\\u8868\\u4E2D\\uFF0C\\u8FD9\\u5DF2\\u7ECF\\u662F\\u4E00\\u4E2A\\u6807\\u51C6\\u7684\\u5206\\u5E03\\u5F0F\\u5E94\\u7528\\u4E86\\uFF0C\\u67E5\\u8BE2\\u74F6\\u9888\\u7684\\u95EE\\u9898\\u5F88\\u81EA\\u7136\\u7684\\u80FD\\u6C34\\u5E73\\u964D\\u89E3\\uFF0C\\u518D\\u6709\\u6027\\u80FD\\u95EE\\u9898\\u53EA\\u9700\\u8981\\u6DFB\\u52A0\\u673A\\u5668\\u5C31\\u80FD\\u89E3\\u51B3\\u3002\\u4E0D\\u8FC7\\u67B6\\u6784\\u590D\\u6742\\u5EA6\\u5728\\u589E\\u5927\\uFF0C\\u7A33\\u5B9A\\u6027\\u5728\\u964D\\u4F4E\\uFF0C\\u8FD9\\u662F\\u65E0\\u6CD5\\u907F\\u514D\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"4. \\u4E2D\\u95F4\\u4EF6/\\u6570\\u636E\\u8BBF\\u95EE\\u5C42/\\u67E5\\u8BE2\\u5206\\u53D1\\u5C42\"), mdx(\"p\", null, \"\\u5728\\u8FD9\\u4E2A\\u8282\\u70B9\\uFF0C\\u6570\\u636E\\u5E93\\u7684\\u4E1A\\u52A1\\u5F62\\u6001\\u5DF2\\u7ECF\\u548C\\u4F20\\u7EDF\\u7684\\u5F88\\u4E0D\\u4E00\\u6837\\u4E86\\uFF0C\\u6240\\u4EE5\\u4E3A\\u4E86\\u66F4\\u597D\\u7684\\u7406\\u89E3\\u8FD9\\u79CD\\u65B0\\u7684\\u5206\\u5E03\\u5F0F\\u6570\\u636E\\uFF0C\\u7A33\\u5B9A\\u4E1A\\u52A1\\u7684\\u5F00\\u53D1\\u5FC3\\u667A\\u8D1F\\u62C5\\uFF0C\\u62BD\\u8C61\\u4E86\\u4E2D\\u95F4\\u4EF6\\u7684\\u6982\\u5FF5\\uFF0C\\u5C06\\u5206\\u5E03\\u5F0F\\u7684\\u7EC6\\u8282\\u9690\\u85CF\\u5728\\u5E95\\u5C42\\u7684\\u914D\\u7F6E\\u4E2D\\uFF0C\\u540C\\u65F6\\u6DFB\\u52A0\\u8D1F\\u8F7D\\u5747\\u8861\\u3001\\u62C6\\u5206\\u89C4\\u5219\\u3001\\u7EF4\\u62A4\\u7B49\\u529F\\u80FD\\u3002\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u4E0A\\u5C01\\u88C5\\u4E86\\u5F00\\u53D1\\u548C\\u4E1A\\u52A1\\u4E2D\\u5BF9\\u6570\\u636E\\u7684\\u589E\\u5220\\u67E5\\u6539\\uFF0C\\u80FD\\u591F\\u6EE1\\u8DB3\\u8FD9\\u4E2A\\u9636\\u6BB5\\u4E1A\\u52A1\\u7684\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u8BFB\\u5199\\u5206\\u79BB\\u3001\\u5206\\u5E93\\u5206\\u8868\\u662F\\u4E2D\\u95F4\\u4EF6\\u7684\\u4E1A\\u52A1\\u5E95\\u5C42\\uFF0C\\u5728\\u914D\\u7F6E\\u5B8C\\u597D\\u4E4B\\u540E\\uFF0C\\u4E1A\\u52A1\\u5BF9\\u6570\\u636E\\u7684\\u8BBF\\u95EE\\u4ECE\\u9700\\u8981\\u81EA\\u5DF1\\u8BA1\\u7B97 hash \\u5230\\u67D0\\u4E2A\\u673A\\u5668\\u7684\\u67D0\\u4E2A\\u6570\\u636E\\u8868\\u4E2D\\u8131\\u79BB\\uFF0C\\u53EA\\u9700\\u8981\\u67E5\\u8BE2\\uFF0C\\u8BA9\\u4E2D\\u95F4\\u4EF6\\u53BB\\u89E3\\u6790\\u3001\\u7136\\u540E\\u901A\\u8FC7\\u8DEF\\u7531\\u5206\\u53D1\\u67E5\\u8BE2\\u771F\\u5B9E\\u7684\\u76EE\\u7684\\u5730\\uFF0C\\u8FD4\\u56DE\\u6211\\u60F3\\u8981\\u7684\\u7ED3\\u679C\\uFF0C\\u8C03\\u7528\\u65B9\\u65E0\\u9700\\u5C06\\u6570\\u636E\\u5E93\\u7684\\u5206\\u8868\\u903B\\u8F91\\u5D4C\\u5165\\u5230\\u4E1A\\u52A1\\u4E2D\\uFF0C\\u4ECE\\u800C\\u964D\\u4F4E\\u5FC3\\u667A\\u8D1F\\u62C5\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u4E2D\\u95F4\\u4EF6\\u5305\\u542B\\u5F88\\u591A\\u7684\\u6982\\u5FF5\\u548C\\u80FD\\u529B\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u517C\\u5BB9\\u591A\\u79CD\\u5E95\\u5C42\\u6570\\u636E\\u5E93\\u89C4\\u8303\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6570\\u636E\\u5E93\\u4E3B\\u5907\\u5207\\u6362\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u8BFB\\u5199\\u5206\\u79BB\\uFF08\\u5E26\\u6743\\u91CD\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5BA2\\u6237\\u7AEF\\u6216\\u8005\\u670D\\u52A1\\u7AEF\\u5904\\u7406\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7075\\u6D3B\\u3001\\u52A8\\u6001\\u7684\\u6570\\u636E\\u5E93\\u62C6\\u5206\\u89C4\\u5219\\u548C\\u914D\\u7F6E\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u4E2D\\u95F4\\u4EF6\\u7684\\u6A21\\u5F0F\\u76EE\\u524D\\u5728\\u5927\\u90E8\\u5206\\u7684\\u5206\\u5E03\\u5F0F\\u67B6\\u6784\\u4E2D\\u90FD\\u80FD\\u6EE1\\u8DB3\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u7684\\u9700\\u6C42\\uFF0C\\u6BD5\\u7ADF\\u67B6\\u6784\\u4E0A\\u5DF2\\u7ECF\\u662F\\u6C34\\u5E73\\u53EF\\u6269\\u5C55\\u7684\\u4E86\\u3002\\u4E0D\\u8FC7\\u7F3A\\u70B9\\u662F\\u4F7F\\u7528\\u95E8\\u69DB\\u3001\\u8FD0\\u7EF4\\u3001\\u914D\\u7F6E\\u7684\\u6210\\u672C\\u6BD4\\u8F83\\u9AD8\\u3002\"), mdx(\"h3\", null, \"5. \\u4E91\\u539F\\u751F\\u4E0B\\u7684\\u5206\\u5E03\\u5F0F\\u4E91\\u6570\\u636E\\u5E93\"), mdx(\"p\", null, \"\\u4F20\\u7EDF\\u7684 \\u5206\\u5E03\\u5F0F\\u6570\\u636E\\u5E93 Mysql \\u4E4B\\u7C7B\\uFF0C\\u6570\\u636E\\u5E93\\u7CFB\\u7EDF\\u90E8\\u7F72\\u5728\\u865A\\u62DF\\u673A\\u548C\\u5206\\u5E03\\u5F0F\\u5B58\\u50A8\\u4E4B\\u4E0A\\uFF0C\\u901A\\u8FC7\\u7F51\\u7EDC io \\u5C06\\u591A\\u6570\\u636E\\u5E93\\u5B9E\\u4F8B\\u8FDE\\u63A5\\u5728\\u4E00\\u8D77\\uFF0C\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u4E0A\\u80FD\\u591F\\u80FD\\u591F\\u627F\\u62C5\\u66F4\\u5927\\u7684\\u5B58\\u50A8\\u548C\\u5BB9\\u707E\\u6027\\uFF0C\\u4F46\\u662F\\u5E95\\u5C42\\u7684\\u67B6\\u6784\\u5E76\\u6CA1\\u6709\\u9488\\u5BF9\\u5206\\u5E03\\u5F0F\\u7684\\u57FA\\u7840\\u8BBE\\u65BD\\u4F18\\u5316\\uFF0C\\u5728 \\u7F51\\u7EDC\\u3001\\u5B58\\u50A8\\u3001\\u8BA1\\u7B97\\u4E0A\\u90FD\\u6709\\u5F88\\u5927\\u7684\\u5B58\\u50A8\\u7A7A\\u95F4\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"\\u5206\\u5E03\\u5F0F\\u4E91\\u6570\\u636E\\u5E93->\\n +---------------+\\n +----------------+ Application +<-------------+\\n | +-------+-------+ |\\n | ^ |\\n v | |\\n +-------+-------+ +---------------+ +---------------+\\n | DB (Master) | | DB (Slave 1) | | DB (Slave 2) |\\n | +<----->+ +<---->+ |\\n +-----+-+-------+ +-----+-+-------+ +-----+-+-------+\\n | ^ | ^ | ^\\n | | | | | |\\n +----------------------------------------------------------------------+\\n | | | | | | | |\\n | +--v-+-------+ +---v-+------+ +---v-+-------+ |\\n | | storage | | storage | | storage | |\\n | | \\xD7n | | \\xD7n | | \\xD7n | |\\n | +------------+ +------------+ +-------------+ |\\n | Cloud storage |\\n +----------------------------------------------------------------------+\\n\")), mdx(\"p\", null, \"\\u4E91\\u539F\\u751F\\u610F\\u601D\\u662F\\u571F\\u751F\\u571F\\u957F\\u6839\\u636E\\u73B0\\u4EE3\\u4E91\\u67B6\\u6784\\u4E0B\\u7684\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u865A\\u62DF\\u5316\\u6280\\u672F\\u3001\\u5206\\u5E03\\u5F0F\\u67B6\\u6784\\u4F5C\\u4E3A\\u57FA\\u7840\\u7684\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u4E91\\u6570\\u636E\\u5E93\\u4F5C\\u4E3A Paas \\u63D0\\u4F9B\\u5B8C\\u6574\\u7684\\u6570\\u636E\\u5E93\\u670D\\u52A1\\uFF0C\\u6280\\u672F\\u4E0A\\u662F\\u642D\\u5EFA\\u5728\\u4E91\\u8BBE\\u65BD\\u57FA\\u7840\\u4E0A\\uFF0C\\u914D\\u5408\\u5BF9\\u5E94\\u7684\\u7BA1\\u7406\\u8F6F\\u4EF6\\u3001\\u5BA2\\u6237\\u7AEF SDK \\u7B49\\u5B9E\\u73B0\\u66F4\\u53EF\\u9760\\u7684\\u670D\\u52A1\\uFF0C\\u540C\\u65F6\\u6EE1\\u8DB3\\u53EF\\u4F38\\u7F29\\u3001\\u5206\\u5E03\\u5F0F\\u3001\\u7EC6\\u7C92\\u5EA6\\u8C03\\u5EA6\\u7B49\\uFF0C\\u4EE5\\u6B64\\u5B9E\\u73B0\\u73B0\\u4EE3\\u6570\\u636E\\u5E93\\u7684\\u9700\\u6C42\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"\\u4E91\\u539F\\u751F\\u6570\\u636E\\u5E93->\\n +---------------+\\n +----------------+ Application +<-------------+\\n | +-------+-------+ |\\n | ^ |\\n v | |\\n +------+--------+ +-------+-------+ +-------+-------+\\n | DB (Master) | | DB (Slave 1) | | DB (Slave 2) |\\nscale up | +<----->+ +<---->+ |\\n +----+-+--------+ +-----+-+-------+ +----+-+--------+\\n | ^ | ^ | ^\\n v | v | v |\\n +--------+-+----------------------+-+-------------------+-+------------+\\n | +-----------------------------+ |\\n | | Share Storage | |\\nscale out | | | |\\n | | \\xD7n | |\\n | +-----------------------------+ Cloud storage |\\n +----------------------------------------------------------------------+\\n\")), mdx(\"p\", null, \"\\u76F8\\u6BD4\\u4F20\\u7EDF\\u7684\\u6570\\u636E\\u5E93\\u4E0A\\u4E91\\u7684\\u5B9E\\u73B0\\uFF0C\\u6BD4\\u5982\\u5728\\u4E91\\u670D\\u52A1\\u5668\\u4E0A\\u5B89\\u88C5\\u6570\\u636E\\u5E93\\u8F6F\\u4EF6\\uFF0C\\u4E91\\u539F\\u751F\\u6570\\u636E\\u5E93\\u5F3A\\u8C03\\u5728\\u4FDD\\u8BC1\\u5C3D\\u91CF\\u7684\\u517C\\u5BB9\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4ECE\\u5F15\\u64CE\\u5C42\\u9762\\uFF0C\\u5C06\\u5E95\\u5C42\\u7684\\u786C\\u4EF6\\u63A5\\u53E3\\u3001\\u8BA1\\u7B97\\u80FD\\u529B\\u62BD\\u8C61\\u5230\\u4E91\\u57FA\\u7840\\u8BBE\\u65BD\\u4E0A\\uFF0C\\u4ECE\\u800C\\u4ECE\\u5E95\\u5C42\\u63D0\\u4F9B\\u52A8\\u6001\\u53EF\\u4F38\\u7F29\\u7684\\u5206\\u5E03\\u5F0F\\u80FD\\u529B\\uFF0C\\u800C\\u4E0D\\u662F\\u53EA\\u662F\\u8BBE\\u5907\\u4E0A\\u4E91\\uFF0C\\u670D\\u52A1\\u4F9D\\u7136\\u65E0\\u6CD5\\u65B9\\u4FBF\\u4F38\\u7F29\\u3001\\u53EF\\u9760\\u6027\\u4F9D\\u65E7\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u6570\\u636E\\u5E93\\u5927\\u90E8\\u5206\\u662F\\u4F9D\\u9760\\u4E91\\u670D\\u52A1\\u5382\\u5546\\u63D0\\u4F9B\\u7684\\u670D\\u52A1\\uFF0C\\u6709\\u4E00\\u6574\\u5957\\u7684\\u6280\\u672F\\u65B9\\u6848\\u4FDD\\u8BC1\\u6027\\u80FD\\u3001\\u5B89\\u5168\\u3001\\u5065\\u58EE\\u6027\\u3001\\u53EF\\u6269\\u5C55\\u548C\\u6210\\u672C\\u3002\\u6BD4\\u5982\\u817E\\u8BAF\\u4E91\\u6570\\u636E\\u5E93 CynosDB\\u3001\\u963F\\u91CC\\u4E91 PolarDB\\u3001AWS Aurora\\u3001\\u534E\\u4E3A\\u4E91 Taurus\\u7B49\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u6570\\u636E\\u5E93\\u662F\\u4F20\\u7EDF\\u7684\\u4E1A\\u52A1\\u6570\\u636E\\u5E93\\uFF0C\\u5F3A\\u8C03\\u7684\\u662F\\u5B9E\\u65F6\\u7684\\u5B58\\u50A8\\u548C\\u67E5\\u8BE2\\uFF0C\\u6570\\u636E\\u4E00\\u81F4\\u6027\\u548C\\u5B9E\\u65F6\\u6027\\u8981\\u6C42\\u8F83\\u9AD8\\uFF0C\\u4E0E\\u5F3A\\u8C03\\u8BA1\\u7B97\\u7684 Hive \\u7C7B\\u5927\\u89C4\\u6A21\\u5206\\u5E03\\u5F0F\\u8BA1\\u7B97\\u548C\\u5B58\\u50A8\\u4ED3\\u5E93\\u662F\\u4E24\\u4E2A\\u6982\\u5FF5\\uFF0C\\u5373\\u4F7F Hive \\u4E2D\\u6570\\u636E\\u6709\\u7C7B\\u4F3C\\u7684 SQL \\u67E5\\u8BE2\\u3002\")), mdx(\"h2\", null, \"\\u4E8C\\u3001SQL\"), mdx(\"p\", null, \"\\uFF08Structured Query Language\\uFF0C\\u7ED3\\u6784\\u5316\\u67E5\\u8BE2\\u8BED\\u8A00\\uFF09 \\u662F\\u4EC0\\u4E48\\u7684\\u7406\\u8BBA\\u5C31\\u4E0D\\u8BF4\\u4E86~~\"), mdx(\"h3\", null, \"1. SQL \\u793A\\u4F8B\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-sql\"\n }, \"SELECT [ALL|DISTINCT] <\\u5217\\u540D> as <\\u522B\\u79F0> [,<\\u8868\\u540D> as <\\u522B\\u79F0> ]....\\nFROM <\\u8868\\u540D> as <\\u522B\\u79F0> [,<\\u8868\\u540D> as <\\u522B\\u79F0> ]....\\nwhere <\\u6761\\u4EF6> \\nGROUP BY <\\u5217\\u540D>\\nHAVING <\\u6761\\u4EF6>\\nORDER BY <\\u5217\\u540D> [ASC|DESC]\\n\")), mdx(\"h3\", null, \"2. SQL \\u6267\\u884C\\u7684\\u987A\\u5E8F\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5E94\\u7528\\u7A0B\\u5E8F\\u4E0E\\u6570\\u636E\\u5E93\\u670D\\u52A1\\u5668\\u5EFA\\u7ACB\\u94FE\\u63A5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"sql\\u53D1\\u9001\\u5230\\u6570\\u636E\\u5E93\\uFF0C\\u6570\\u636E\\u5E93\\u9A8C\\u8BC1\\u662F\\u5426\\u6709\\u6267\\u884C\\u7684\\u6743\\u9650\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u8FDB\\u5165\\u8BED\\u6CD5\\u89E3\\u6790\\u5668\\uFF0C\\u8FDB\\u884C\\u8BCD\\u6CD5\\u4E0E\\u8BED\\u6CD5\\u5206\\u6790\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u8FDB\\u5165\\u4F18\\u5316\\u5668\\u751F\\u6210\\u6267\\u884C\\u8BA1\\u5212\\uFF0C\\u90E8\\u5206dbms\\u4F1A\\u68C0\\u67E5\\u662F\\u5426\\u6709\\u53EF\\u91CD\\u7528\\u7684\\u6267\\u884C\\u8BA1\\u5212\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6839\\u636E\\u6267\\u884C\\u8BA1\\u5212\\u4F9D\\u6B21\\u626B\\u63CF\\u76F8\\u5173\\u8868\\u4E2D\\u7684\\u884C\\uFF0C\\u4E0D\\u5728\\u6570\\u636E\\u7F13\\u51B2\\u533A\\u7684\\u8D70io\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u540C\\u65F6\\u5BF9\\u4E8E\\u88AB\\u626B\\u63CF\\u7684\\u884C\\u53EF\\u80FD\\u52A0\\u9501\\uFF0C\\u540C\\u65F6\\u4E5F\\u53EF\\u80FD\\u4F1A\\u88AB\\u5176\\u4ED6sql\\u963B\\u585E\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u626B\\u63CF\\u7684\\u884C\\u8DB3\\u591F\\u653E\\u5165\\u67E5\\u8BE2\\u7F13\\u5B58\\u5219\\u5F00\\u59CB\\u8FD0\\u7B97\\u6216\\u76F4\\u63A5\\u8FD4\\u56DE\\uFF0C\\u4E0D\\u591F\\u5219\\u751F\\u6210\\u4E34\\u65F6\\u8868\\uFF0C\\u53EF\\u80FD\\u6D88\\u8017io\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5BF9sql\\u7ED3\\u679C\\u8FDB\\u884C\\u8BA1\\u7B97\\uFF08\\u53EF\\u80FD\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5C06\\u8BA1\\u7B97\\u5B8C\\u6210\\u7684\\u7ED3\\u679C\\u5168\\u90E8\\u5199\\u5165\\u7F51\\u7EDCio\\uFF08\\u53EF\\u80FD\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5982\\u679C\\u4E8B\\u52A1\\u5B8C\\u6210\\u5219\\u540C\\u6B65\\u4E8B\\u52A1\\u65E5\\u5FD7\\u5E76\\u91CA\\u653E\\u9501\\uFF0C\\u5177\\u4F53\\u65B9\\u5F0F\\u53D6\\u51B3\\u4E8Edbms\\u548C\\u5F53\\u524D\\u914D\\u7F6E11.\\u5173\\u95ED\\u8FDE\\u63A5\\uFF08\\u53EF\\u9009\\uFF09\")), mdx(\"h3\", null, \"3. SQL \\u662F\\u5BF9\\u5173\\u7CFB\\u7684\\u63CF\\u8FF0\\u610F\\u56FE\"), mdx(\"p\", null, \"SQL \\u67E5\\u8BE2\\uFF0C\\u53EF\\u4EE5\\u7406\\u89E3\\u4E3A\\u5BF9\\u4E00\\u4E9B\\u5173\\u7CFB\\u96C6\\u5408\\u7684\\u8BA1\\u7B97\\uFF0C\\u7136\\u540E\\u751F\\u6210\\u65B0\\u7684\\u610F\\u56FE\\u4E0B\\u7684\\u5173\\u7CFB\\u96C6\\u5408\\u3002\"), mdx(\"p\", null, \"\\u65E0\\u8BBA\\u662F FROM\\u3001WHERE\\u3001GROUP BY\\u3001ORDER\\u3001LIMIT \\u90FD\\u662F\\u5BF9\\u6570\\u636E\\u5173\\u7CFB\\u7684\\u63CF\\u8FF0\\u610F\\u56FE\\uFF0C\\u5F15\\u64CE\\u4F1A\\u8FD4\\u56DE\\u8FD9\\u4E2A\\u610F\\u56FE\\u4E0B\\u7684\\u65B0\\u7684\\u5173\\u7CFB\\u96C6\\u5408\"), mdx(\"h3\", null, \"4. SQL \\u4E2D\\u4E0D\\u9700\\u8981\\u5173\\u5FC3\\u8BA1\\u7B97\\uFF0C\\u4F46\\u662F\\u9700\\u8981\\u5173\\u5FC3\\u6548\\u7387\"), mdx(\"p\", null, \"\\u6570\\u636E\\u5E93\\u7684\\u67E5\\u8BE2\\u5BF9\\u4E8E\\u4E1A\\u52A1\\u662F\\u65E0\\u611F\\u77E5\\u7684\\uFF0C\\u53EA\\u9700\\u8981\\u9002\\u7528 SQL \\u58F0\\u660E\\u9700\\u8981\\u7684\\u6570\\u636E\\uFF0C\\u5176\\u4E2D\\u65E0\\u8BBA\\u53D1\\u751F\\u4E86\\u4EC0\\u4E48\\u8BA1\\u7B97\\u3001\\u7F13\\u5B58\\u3001\\u805A\\u5408\\u3001\\u904D\\u5386\\u7B49\\u8BA1\\u7B97\\u90FD\\u662F\\u4E0D\\u9700\\u8981\\u8003\\u8651\\u7684\\uFF0C\\u66F4\\u4E0D\\u7528\\u8003\\u8651\\u600E\\u4E48\\u5728\\u4E1A\\u52A1\\u4E2D\\u66FF\\u4EE3\\u5176\\u4E2D\\u7684\\u5B9E\\u73B0\\uFF0C\\u6CA1\\u6709\\u4EC0\\u4E48\\u610F\\u4E49\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u8BA1\\u7B97\\u6240\\u6D88\\u8017\\u7684\\u6027\\u80FD\\u548C\\u6548\\u7387\\u8DDF\\u58F0\\u660E\\u6709\\u5173\\uFF0C\\u8868\\u548C\\u5B57\\u6BB5\\u7684\\u63CF\\u8FF0\\u5173\\u7CFB\\u7740\\u5E95\\u5C42\\u67E5\\u8BE2\\u7684\\u6548\\u7387\\u3002\\u6BD4\\u5982\\u67E5\\u8BE2\\u5168\\u90E8\\u5B57\\u6BB5\\u786E\\u5B9E\\u6BD4\\u6307\\u5B9A\\u5B57\\u6BB5\\u8017\\u65F6\\uFF0C\\u9650\\u5236\\u6761\\u6570\\u786E\\u5B9E\\u80FD\\u51CF\\u5C11\\u67E5\\u8BE2\\u8017\\u65F6\\uFF0C\\u4F46\\u662F\\u8FD9\\u4E9B\\u90FD\\u662F\\u8DDF\\u4E1A\\u52A1\\u76F8\\u5173\\uFF0C\\u6240\\u4EE5\\u7ED3\\u5408\\u4E1A\\u52A1\\u4F18\\u5316\\u67E5\\u8BE2\\u6548\\u7387\\u624D\\u662F SQL \\u8BED\\u8A00\\u7684\\u91CD\\u70B9\\u3002\"), mdx(\"h3\", null, \"5. group by \\u548C join \\u8F6C\\u6362\\u4E86\\u539F\\u6765\\u7684\\u8868\\u7ED3\\u6784\"), mdx(\"p\", null, \"group \\u628A\\u8868\\u6309\\u67D0\\u4E9B\\u5B57\\u6BB5\\u7EDF\\u8BA1\\u7F29\\u5C0F\\uFF0Cjoin \\u5219\\u4F7F\\u7528\\u7B1B\\u5361\\u5C14\\u79EF\\u5C06\\u591A\\u4E2A\\u8868\\u8FDE\\u63A5\\u5C55\\u5F00\\u3002\"), mdx(\"h3\", null, \"\\u4E0D\\u540C\\u7684\\u8F6F\\u4EF6\\u548C\\u5F15\\u64CE\\u5BF9 SQL \\u7684\\u652F\\u6301\"), mdx(\"p\", null, \"SQL \\u662F\\u4E00\\u95E8\\u8BED\\u8A00\\uFF0C\\u4F46\\u662F\\u4E0D\\u540C\\u6570\\u636E\\u5E93\\u8F6F\\u4EF6\\u6216\\u8005\\u4E0D\\u540C\\u7684\\u5F15\\u64CE\\u5BF9\\u8BED\\u8A00\\u7684\\u89E3\\u6790\\u6267\\u884C\\u53EF\\u80FD\\u4E0D\\u751A\\u76F8\\u540C\\uFF0C\\u751A\\u81F3\\u6709\\u6269\\u5C55\\u7684\\u8BED\\u6CD5\\u7B49\\uFF0C\\u8FD9\\u70B9\\u9700\\u8981\\u660E\\u786E\\uFF0C\\u4E0D\\u80FD\\u601D\\u7EF4\\u5B9A\\u5F0F\\uFF0C\\u9700\\u8981\\u6839\\u636E\\u4E1A\\u52A1\\u6765\\u9002\\u7528\\u4E0D\\u540C\\u7684\\u4EE3\\u7801\\u3002(\\u5E9F\\u8BDD)\"), mdx(\"h3\", null, \"6. \\u7D22\\u5F15\\u4E0E\\u6027\\u80FD\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6DFB\\u52A0\\u7D22\\u5F15\\u80FD\\u663E\\u8457\\u63D0\\u9AD8\\u67E5\\u8BE2\\u6027\\u80FD\\uFF0C\\u4F46\\u662F\\u4F1A\\u964D\\u4F4E\\u6570\\u636E\\u7684\\u7EF4\\u62A4\\u901F\\u5EA6\\uFF0C\\u5199\\u5165\\u6548\\u7387\\u4F1A\\u53D8\\u4F4E\\u3002\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5BF9\\u67E5\\u8BE2\\u8FC7\\u6EE4\\u6216\\u6392\\u5E8F\\u8F83\\u591A\\u3001\\u53D6\\u503C\\u8303\\u56F4\\u8F83\\u591A\\u3001\\u7B80\\u5355\\u6570\\u636E\\u7C7B\\u578B\\u7684\\u6570\\u636E\\u624D\\u6DFB\\u52A0\\u7D22\\u5F15\")), mdx(\"h3\", null, \"7. \\u5206\\u5E03\\u5F0F\\u6570\\u636E\\u5E93\\u7684\\u8DE8\\u8868\\u67E5\\u8BE2\"), mdx(\"p\", null, \"\\u5206\\u5E03\\u5F0F\\u7684\\u6570\\u636E\\u5E93\\u4ECE\\u539F\\u7406\\u4E0A\\u5BF9\\u4E8E\\u67D0\\u4E9B\\u4E1A\\u52A1\\u4E0D\\u662F\\u592A\\u53CB\\u597D\\uFF0C\\u6BD4\\u5982\\u591A\\u673A\\u5668\\u3001\\u591A\\u4ED3\\u5E93\\u3001\\u591A\\u8868\\u4E0B\\u7684 JOIN \\u64CD\\u4F5C\\uFF0C\\u5982\\u679C\\u6709\\u81EA\\u52A8\\u540C\\u6B65\\u6216\\u8005\\u5E7F\\u64AD\\u7684\\u903B\\u8F91\\uFF0C\\u76F8\\u5F53\\u4E8E\\u5355\\u673A\\u64CD\\u4F5C\\u6027\\u80FD\\u6CA1\\u6709\\u635F\\u5931\\uFF0C\\u4F46\\u662F\\u5982\\u679C\\u8DE8\\u673A\\u5668\\u5206\\u8868\\u67E5\\u8BE2\\uFF0C\\u8FD9\\u5C31\\u9700\\u8981\\u4E00\\u5B9A\\u7684\\u7F51\\u7EDC\\u4F20\\u8F93\\u3001\\u7F13\\u5B58\\u548C\\u8BA1\\u7B97\\u80FD\\u529B\\u62C6\\u5206\\u67E5\\u8BE2\\uFF0C\\u7136\\u540E\\u805A\\u5408\\u6765\\u5B8C\\u6210\\u8FD9\\u4E2A\\u4EFB\\u52A1\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u9700\\u8981\\u7ED3\\u5408\\u4E1A\\u52A1\\u5408\\u9002\\u7684\\u8BBE\\u8BA1 SQL\\uFF0C\\u4E0E\\u4E1A\\u52A1\\u5F3A\\u5173\\u8054\\u3002\"), mdx(\"h3\", null, \"8. where \\u6761\\u4EF6\\u987A\\u5E8F\\u6027\\u80FD\"), mdx(\"p\", null, \"where \\u67E5\\u8BE2\\u7684\\u65F6\\u5019\\u4F1A\\u88AB\\u67E5\\u8BE2\\u4F18\\u5316\\u5668\\u9884\\u5904\\u7406\\uFF0C\\u6839\\u636E\\u7D22\\u5F15\\u3001\\u8054\\u5408\\u7D22\\u5F15\\u7B49\\u4F18\\u5316\\uFF0C\\u4E0D\\u9700\\u8981\\u5728\\u610F SQL \\u672C\\u8EAB\\u7684\\u6392\\u5217\\u987A\\u5E8F\\uFF0C\\u5982\\u679C\\u4E0D\\u653E\\u5FC3\\u7684\\u8BDD\\uFF0C\\u53EF\\u4EE5\\u5C06\\u67E5\\u8BE2\\u8FC7\\u6EE4\\u8F83\\u591A\\u7684\\u653E\\u5DE6\\u8FB9\\u3002\"), mdx(\"h3\", null, \"9. \\u540C\\u65F6\\u5305\\u542B where\\u3001group\\xA0by\\u3001having\\u3001order\\xA0by\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6267\\u884C where \\u5BF9\\u5168\\u8868\\u6570\\u636E\\u505A\\u7B5B\\u9009\\uFF0C\\u8FD4\\u56DE\\u7B2C 1 \\u4E2A\\u7ED3\\u679C\\u96C6\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9488\\u5BF9\\u7B2C 1 \\u4E2A\\u7ED3\\u679C\\u96C6\\u4F7F\\u7528 group\\xA0by \\u5206\\u7EC4\\uFF0C\\u8FD4\\u56DE\\u7B2C 2 \\u4E2A\\u7ED3\\u679C\\u96C6\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9488\\u5BF9\\u7B2C 2 \\u4E2A\\u7ED3\\u679C\\u96C6\\u4E2D\\u7684\\u6BCF 1 \\u7EC4\\u6570\\u636E\\u6267\\u884C select\\uFF0C\\u6709\\u51E0\\u7EC4\\u5C31\\u6267\\u884C\\u51E0\\u6B21\\uFF0C\\u8FD4\\u56DE\\u7B2C 3 \\u4E2A\\u7ED3\\u679C\\u96C6\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9488\\u5BF9\\u7B2C 3 \\u4E2A\\u7ED3\\u96C6\\u6267\\u884C having \\u8FDB\\u884C\\u7B5B\\u9009\\uFF0C\\u8FD4\\u56DE\\u7B2C 4 \\u4E2A\\u7ED3\\u679C\\u96C6\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9488\\u5BF9\\u7B2C 4 \\u4E2A\\u7ED3\\u679C\\u96C6\\u6392\\u5E8F\\u3002\")), mdx(\"h3\", null, \"10. \\u9501\"), mdx(\"p\", null, \"\\u4E3A\\u4E86\\u4FDD\\u8BC1\\u4E00\\u81F4\\u6027\\u7684\\u57FA\\u7840\\uFF0C\\u6570\\u636E\\u5E93\\u4E2D\\u5305\\u542B\\u5F88\\u591A\\u9501\\u7684\\u6982\\u5FF5\\uFF0C\\u5728\\u89E3\\u9501\\u4E4B\\u524D\\u6570\\u636E\\u4E0D\\u5141\\u8BB8\\u8BFB\\u6216\\u5199\\uFF0C\\u4E3A\\u4E86\\u4FDD\\u8BC1\\u6570\\u636E\\u7684\\u4E00\\u76F4\\u548C\\u4E8B\\u52A1\\u7684\\u9694\\u79BB\\u4E4B\\u7C7B\\u7684\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u822C\\u60C5\\u51B5\\u4E0B\\u9501\\u7684\\u5B58\\u5728\\u662F\\u81EA\\u52A8\\u8F85\\u52A9\\u6570\\u636E\\u5E93\\u8FD0\\u884C\\u7684\\uFF0C\\u4E1A\\u52A1\\u4E2D\\u4E0D\\u4F1A\\u4E3B\\u52A8\\u6D89\\u53CA\\u5230\\u5176\\u4E2D\\u7684\\u6982\\u5FF5\\uFF0C\\u4F46\\u662F\\u4E1A\\u52A1\\u4E2D\\u5982\\u679C SQL \\u7528\\u9519\\u4E86\\uFF0C\\u53EF\\u80FD\\u56E0\\u4E3A\\u9501\\u7684\\u539F\\u56E0\\u5BFC\\u81F4\\u5E76\\u884C\\u6548\\u7387\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4E2D\\u6BD4\\u8F83\\u591A\\u7684\\u4E50\\u89C2\\u9501\\u548C\\u60B2\\u89C2\\u9501\\uFF0C\\u4E50\\u89C2\\u9501\\u5728\\u4E0D\\u9501\\u5B9A\\u7684\\u60C5\\u51B5\\u4E0B\\u53BB\\u8BFB\\u53D6\\u6216\\u8005\\u66F4\\u65B0\\u6570\\u636E\\uFF0C\\u5982\\u679C\\u53D1\\u73B0\\u4E0D\\u5BF9\\u52B2\\u518D\\u6267\\u884C\\u56DE\\u6EDA\\u3002\\u60B2\\u89C2\\u9501\\u7528\\u7684\\u5C31\\u662F\\u6570\\u636E\\u5E93\\u7684\\u884C\\u9501\\uFF0C\\u8BA4\\u4E3A\\u6570\\u636E\\u5E93\\u4F1A\\u53D1\\u751F\\u5E76\\u53D1\\u51B2\\u7A81\\uFF0C\\u76F4\\u63A5\\u4E0A\\u6765\\u5C31\\u628A\\u6570\\u636E\\u9501\\u4F4F\\uFF0C\\u5176\\u4ED6\\u4E8B\\u52A1\\u4E0D\\u80FD\\u4FEE\\u6539\\uFF0C\\u76F4\\u81F3\\u63D0\\u4EA4\\u4E86\\u5F53\\u524D\\u4E8B\\u52A1\\u3002\"), mdx(\"h3\", null, \"11. \\u4E8B\\u52A1\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-sql\"\n }, \"-- \\u6807\\u8BB0\\u4E8B\\u52A1\\u5F00\\u59CB\\nBEGIN;\\n-- \\u5C1D\\u8BD5\\u6267\\u884C SQL\\nUPDATE accounts SET balance = balance - 100 WHERE id = 1;\\nUPDATE accounts SET balance = balance + 100 WHERE id = 2;\\n\\n-- 1. \\u5728\\u4E1A\\u52A1\\u4EE3\\u7801\\u4E2D\\u5224\\u65AD\\u4E0A\\u9762\\u90FD\\u6210\\u529F\\u4E4B\\u540E\\nCOMMIT;\\n\\n-- 2. \\u5982\\u679C\\u67D0\\u4E00\\u4E2A sql \\u5931\\u8D25\\uFF0C\\u6216\\u8005\\u6570\\u636E\\u68C0\\u67E5\\u51FA\\u73B0\\u95EE\\u9898\\u4E4B\\u540E\\nROLLBACK;\\n\")), mdx(\"p\", null, \"\\u4E8B\\u52A1\\u9700\\u8981\\u5728\\u4E1A\\u52A1\\u4E2D\\u63A7\\u5236\\u8FDB\\u7A0B\\u548C\\u5206\\u652F\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u7C7B\\u4F3C\\u4E0B\\u9762\\u7684\\u4EE3\\u7801\\ntry {\\n // \\u6267\\u884C sql\\n execute(\\\"insert ...\\\");\\n execute(\\\"insert ...\\\");\\n // \\u90FD\\u6CA1\\u95EE\\u9898\\u7684\\u8BDD commit\\n commit();\\n} catch (Exception e) {\\n // \\u4E00\\u65E6\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u6267\\u884C\\u56DE\\u6EDA\\n rollback();\\n}\\n\")), mdx(\"p\", null, \"\\u7B80\\u5355\\u793A\\u4F8B\\uFF0C\\u5B9E\\u9645\\u4F7F\\u7528\\u5230\\u4E8B\\u52A1\\u7684\\u8BDD\\u4E1A\\u52A1\\u90FD\\u4F1A\\u5F88\\u590D\\u6742\\uFF0C\\u8FD9\\u91CC\\u4E0D\\u6DF1\\u5165\\u4E86\\u3002\"), mdx(\"h3\", null, \"12. \\u5E38\\u89C1\\u7684\\u67E5\\u8BE2\\u4F18\\u5316\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u5C3D\\u91CF\\u907F\\u514D\\u4F7F\\u7528 in \\u548C not in\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"in\\u548Cnot in\\u4E5F\\u4F1A\\u5BFC\\u81F4\\u6570\\u636E\\u5E93\\u8FDB\\u884C\\u5168\\u8868\\u641C\\u7D22\\uFF0C\\u589E\\u52A0\\u8FD0\\u884C\\u65F6\\u95F4\\u3002\\u4F7F\\u7528 EXISTS\\u3001between \\u4EE3\\u66FF\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u5C3D\\u91CF\\u907F\\u514D\\u4F7F\\u7528 or\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u907F\\u514D\\u6392\\u5E8F\\uFF0C\\u5C3D\\u91CF\\u5728\\u8FC7\\u6EE4\\u540E\\u6392\\u5E8F\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u80FD\\u5199\\u5728 WHERE \\u5B50\\u53E5\\u91CC\\u7684\\u6761\\u4EF6\\u4E0D\\u8981\\u5199\\u5728 HAVING \\u5B50\\u53E5\\u91CC\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u4F7F\\u7528 LIKE \\u5C3D\\u91CF\\u524D\\u7F6E\\u5339\\u914D\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"where \\u7684\\u6761\\u4EF6\\u5B57\\u6BB5\\u672C\\u8EAB\\u4E0D\\u8981\\u52A0\\u51FD\\u6570\"))), mdx(\"h3\", null, \"13. HiveSQL \\u4E2D\\u4F18\\u5316\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u51CF\\u5C11\\u548C/\\u6216\\u6D88\\u9664 shuffle \\u64CD\\u4F5C\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u67E5\\u8BE2\\u65F6\\u4F18\\u5148\\u8FC7\\u6EE4\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5728join\\u65F6\\uFF0C\\u5C3D\\u91CF\\u4FDD\\u8BC1\\uFF0Cjoin key\\uFF0C\\u5728\\u5DE6\\u53F3\\u4E24\\u8FB9\\u81F3\\u5C11\\u6709\\u4E00\\u4E2A\\u8868\\u4E2D\\u8FD9\\u4E9Bjoin key\\u662F\\u552F\\u4E00\\u7684\")), mdx(\"h2\", null, \"\\u56DB\\u3001\\u5206\\u5E03\\u5F0F\\u5173\\u7CFB\\u578B\\u6570\\u636E\\u5E93\"), mdx(\"h3\", null, \"1. \\u6570\\u636E\\u5E93\\u5B9E\\u4F8B\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u7684\\u5B9E\\u4F8B\\u65B9\\u6848\\u90FD\\u662F\\u5206\\u5E93\\u3001\\u5206\\u8868\\uFF0C\\u6BCF\\u4E2A\\u8868\\u53C8\\u5212\\u5206\\u4E3B\\u4ECE\\u3002\\u6240\\u4EE5\\u770B\\u8D77\\u6765\\u662F\\u4E00\\u4E2A\\u6570\\u636E\\u5E93\\uFF0C\\u5E95\\u5C42\\u7684\\u6570\\u636E\\u5E93\\u5B9E\\u4F8B\\u8981\\u591A\\u5F97\\u591A\\u3002\"), mdx(\"p\", null, \"\\u6570\\u636E\\u5E93\\u6216\\u6570\\u636E\\u8868\\u7684\\u5212\\u5206\\u80FD\\u591F\\u901A\\u8FC7\\u914D\\u7F6E\\u6216\\u8005\\u81EA\\u52A8\\u6269\\u5C55\\uFF0C\\u6839\\u636E\\u6570\\u636E\\u7684\\u91CD\\u8981\\u6027\\u6765\\u8BB2\\uFF0C\\u4E3B\\u4ECE\\u7684\\u6570\\u91CF\\u53EF\\u80FD\\u4E5F\\u5E76\\u4E0D\\u4E00\\u5B9A\\u552F\\u4E00\\uFF0C\\u53EF\\u80FD\\u6709\\u591A\\u5730\\u57DF\\u7684\\u5206\\u5E03\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u4E00\\u4E2A\\u6570\\u636E\\u5E93\\u6709 10 \\u5F20\\u8868\\uFF0C\\u5176\\u4E2D\\u4E00\\u5F20\\u8868\\u5206\\u6210\\u4E86 10 \\u4E2A\\u5206\\u5E03\\u5F0F\\u6570\\u636E\\u5E93\\u5B9E\\u4F8B\\u4E2D\\uFF0C\\u6BCF\\u4E2A\\u5206\\u5E03\\u5F0F\\u5B9E\\u4F8B\\u8282\\u70B9\\u53EF\\u80FD\\u8FD8\\u6709\\u5728 3 \\u4E2A\\u57CE\\u5E02\\u7684 6 \\u53F0\\u4ECE\\u670D\\u52A1\\u5668\\u540C\\u6B65\\u6570\\u636E\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u67E5\\u8BE2\\u5728\\u5BA2\\u6237\\u7AEF\\u6570\\u636E\\u5E93\\u4E2D\\u95F4\\u4EF6\\u521B\\u5EFA\\uFF0C\\u7136\\u540E\\u53D1\\u9001\\u5230\\u6700\\u8FD1\\u7684\\u67E5\\u8BE2\\u8282\\u70B9\\uFF0C\\u67E5\\u8BE2\\u8282\\u70B9\\u6839\\u636E\\u67E5\\u8BE2\\u7684\\u54C8\\u5E0C\\u51FD\\u6570\\u627E\\u5230\\u771F\\u5B9E\\u7684\\u6570\\u636E\\u5E93\\u8282\\u70B9\\uFF0C\\u901A\\u8FC7\\u8DEF\\u7531\\u53D1\\u9001\\u67E5\\u8BE2\\u8BF7\\u6C42\\uFF0C\\u5982\\u679C\\u76EE\\u6807\\u6570\\u636E\\u5E93\\u5B95\\u673A\\uFF0C\\u80FD\\u591F\\u53CA\\u65F6\\u5207\\u6362\\u5230\\u540C\\u673A\\u623F\\u7684\\u53E6\\u4E00\\u53F0\\u5B9E\\u65F6\\u4ECE\\u6570\\u636E\\u5E93\\uFF0C\\u53C8\\u53D1\\u73B0\\u540C\\u673A\\u623F\\u7684\\u5B9E\\u4F8B\\u6389\\u7535\\u65E0\\u6CD5\\u89E6\\u8FBE\\uFF0C\\u8FD8\\u80FD\\u518D\\u5207\\u6362\\u5230\\u53E6\\u4E00\\u4E2A\\u57CE\\u5E02\\u7684\\u5907\\u4EFD\\u5B9E\\u4F8B\\u5B8C\\u6210\\u67E5\\u8BE2\\u3002\"), mdx(\"h3\", null, \"2. \\u4E3B\\u952E\\u552F\\u4E00 ID \\u751F\\u6210\"), mdx(\"p\", null, \"\\u5206\\u5E03\\u5F0F\\u6570\\u636E\\u5E93\\uFF0C\\u8868\\u683C\\u62C6\\u5206\\u4E3A\\u591A\\u4E2A\\u5B58\\u50A8\\u8282\\u70B9\\uFF0C\\u4E3B\\u952E\\u5C31\\u6CA1\\u5FC5\\u987B\\u4FDD\\u8BC1\\u4E0D\\u91CD\\u590D\\uFF0C\\u6240\\u4EE5\\u6CA1\\u529E\\u6CD5\\u8BA9\\u6570\\u636E\\u5E93\\u81EA\\u589E\\u7EF4\\u62A4\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E00\\u60F3\\u6CD5\\u662F\\u8003\\u8651\\u4F7F\\u7528 UUID \\u4F5C\\u4E3A\\u4E3B\\u952E\\uFF0C\\u8FD9\\u4E2A\\u6700\\u7B80\\u5355\\u7684\\u5B9E\\u73B0\\uFF0C\\u4F46\\u662F\\u5B57\\u7B26\\u4E32\\u4F5C\\u4E3A\\u6570\\u636E\\u5E93\\u4E3B\\u952E\\u7684\\u8BDD\\uFF0C\\u7D22\\u5F15\\u6027\\u80FD\\u4F1A\\u5F88\\u4F4E\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E8C\\u60F3\\u6CD5\\u662F\\u6BCF\\u4E2A\\u6570\\u636E\\u8282\\u70B9\\u7684\\u81EA\\u589E\\u4F7F\\u7528\\u4E0D\\u540C\\u7684\\u6B65\\u957F\\uFF0C\\u6BD4\\u5982\\u4E00\\u4E2A\\u662F 1\\u30013\\u30015\\u30017\\u30019\\uFF0C\\u53E6\\u4E00\\u4E2A\\u662F 2\\u30014\\u30016\\u30018\\u300110\\uFF0C\\u8FD9\\u6837\\u9012\\u589E\\u800C\\u4E14\\u4E0D\\u552F\\u4E00\\u3002\\u4F46\\u662F\\u7F3A\\u70B9\\u662F\\u56FA\\u5B9A\\u6B65\\u957F\\u540E\\u5C31\\u6CA1\\u529E\\u6CD5\\u518D\\u6269\\u5BB9\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u4E3B\\u952E\\u5FC5\\u987B\\u662F\\u6570\\u5B57\\u578B\\u7684\\uFF0C\\u552F\\u4E00\\u6027\\u662F\\u6700\\u57FA\\u672C\\u7684\\u8981\\u6C42\\uFF0C\\u800C\\u4E14\\u5FC5\\u987B\\u9012\\u589E\\uFF0C\\u518D\\u4E0D\\u6D4E\\u4E5F\\u53EF\\u4EE5\\u6D6A\\u8D39\\u4E00\\u70B9\\u6027\\u80FD\\u7684\\u8D8B\\u52BF\\u9012\\u589E\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E2D\\u5FC3\\u5316\\u7684 id \\u6D3E\\u53D1\\u601D\\u8DEF\")), mdx(\"p\", null, \"\\u53EF\\u4EE5\\u4E13\\u95E8\\u8BBE\\u5B9A\\u4E00\\u4E2A\\u670D\\u52A1\\uFF0C\\u751F\\u6210\\u552F\\u4E00\\u4E14\\u9012\\u589E\\u7684 id\\uFF0C\\u8FD9\\u6837\\u80FD\\u4FDD\\u8BC1 id \\u6CA1\\u95EE\\u9898\\uFF0C\\u751F\\u6210\\u7684\\u65B9\\u6CD5\\u6709\\u5F88\\u591A\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"1. \\u5355\\u4E2A\\u6570\\u636E\\u5E93\\u81EA\\u589E\\uFF0C\\u53D6\\u8FD9\\u4E2A\\u9012\\u589E\\u503C\\n2. \\u4F7F\\u7528 KV \\u5B58\\u50A8\\uFF0C\\u6BD4\\u5982\\u9AD8\\u6027\\u80FD\\u7684 Redis \\u81EA\\u5DF1\\u5199\\u903B\\u8F91\\u6BCF\\u6B21 +1 \\u751F\\u6210 id\\n\")), mdx(\"p\", null, \"\\u5355\\u70B9\\u7684\\u670D\\u52A1\\u4E00\\u822C\\u53EF\\u9760\\u6027\\u4E0D\\u662F\\u5F88\\u7406\\u60F3\\uFF0C\\u4E00\\u65E6\\u51FA\\u73B0\\u5B95\\u673A\\u4E0B\\u7EBF\\uFF0C\\u90A3\\u4E48\\u4F1A\\u6781\\u5927\\u7684\\u5F71\\u54CD\\u670D\\u52A1\\uFF0C\\u800C\\u4E14 Redis \\u7684\\u6570\\u636E\\u6301\\u4E45\\u5316\\u95EE\\u9898\\u3001\\u5B95\\u673A\\u6062\\u590D\\u95EE\\u9898\\u3001\\u8BF7\\u6C42\\u963B\\u585E\\u3001\\u7F51\\u7EDC\\u5E76\\u53D1\\u7B49\\u65B9\\u9762\\u7684\\u95EE\\u9898\\uFF0C\\u8FD9\\u5757\\u5F88\\u96BE\\u505A\\u7684\\u5F88\\u53EF\\u9760\\u3002\"), mdx(\"ol\", {\n \"start\": 2\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6570\\u5B57 UUID\")), mdx(\"p\", null, \"UUID \\u7684\\u4E00\\u4E2A\\u5F88\\u5927\\u7684\\u7F3A\\u70B9\\u662F\\u5B57\\u7B26\\u4E32\\u7C7B\\u578B\\uFF0C\\u4F46\\u662F UUID \\u7684\\u751F\\u6210\\u6839\\u636E\\u673A\\u623F\\u3001\\u65F6\\u95F4\\u6233\\u7B49\\u4FE1\\u606F\\u54C8\\u5E0C\\u51FA\\u7684\\u5B57\\u7B26\\u4E32\\uFF0C\\u6709\\u501F\\u9274\\u7684\\u610F\\u4E49\\u3002\"), mdx(\"p\", null, \"\\u96EA\\u82B1 snowflake \\u7B97\\u6CD5\\u5C31\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E8C\\u8FDB\\u5236\\u7F16\\u7801\\u6570\\u636E\\uFF0C\\u5C06\\u673A\\u623F\\u4FE1\\u606F\\u3001\\u65F6\\u95F4\\u6233\\u3001\\u673A\\u5668\\u4FE1\\u606F\\u3001\\u81EA\\u589E\\u6570\\u7B49\\u4F5C\\u4E3A\\u4E8C\\u8FDB\\u5236\\u503C\\uFF0C\\u7136\\u540E\\u8F6C\\u6362\\u4E3A 10 \\u8FDB\\u5236\\u7684\\u6570\\u5B57\\u3002\\u8FD9\\u6837\\u80FD\\u591F\\u4FDD\\u8BC1\\u552F\\u4E00\\u3001\\u4E5F\\u80FD\\u591F\\u4FDD\\u8BC1\\u8D8B\\u52BF\\u9012\\u589E\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5176\\u4E2D\\u7684\\u65F6\\u95F4\\u6233\\u4FE1\\u606F\\u7684\\u83B7\\u53D6\\u4F9D\\u8D56\\u4E8E\\u673A\\u623F\\u7684\\u65F6\\u95F4\\uFF0C\\u5982\\u679C\\u51FA\\u73B0\\u65F6\\u95F4\\u56DE\\u62E8\\u53EF\\u80FD\\u51FA\\u73B0\\u91CD\\u590D\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u8FD8\\u6709\\u66F4\\u591A\\u7684\\u65B9\\u6848\\uFF0C\\u90FD\\u6709\\u5404\\u81EA\\u7684\\u9002\\u7528\\u73AF\\u5883\\uFF0C\\u8FD9\\u91CC\\u4E0D\\u518D\\u6DF1\\u7A76\\u3002\"), mdx(\"h3\", null, \"3. sharding \\u5206\\u7247\\u548C\\u67E5\\u8BE2\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u8868\\u7684\\u6570\\u636E\\u6309\\u7167\\u67D0\\u4E2A\\u89C4\\u5219\\u5206\\u914D\\u5230\\u4E0D\\u540C\\u7684\\u6570\\u636E\\u5E93\\u7684\\u4E0D\\u540C\\u7684\\u8868\\u91CC\\uFF0C\\u4E00\\u822C\\u628A\\u8FD9\\u4E2A\\u53EB\\u505A sharding / \\u5206\\u7247\\u3002\"), mdx(\"p\", null, \"\\u5206\\u7247\\u7B56\\u7565\\u7C7B\\u578B\\u975E\\u5E38\\u591A\\uFF0C\\u5927\\u81F4\\u5206\\u4E3A Hash + Mod\\u3001Range\\u3001Tag \\u7B49\\u3002\"), mdx(\"p\", null, \"\\u662F\\u5426\\u4F1A\\u67E5\\u8BE2\\u6240\\u6709\\u7684\\u5E93\\u548C\\u8868\\u662F\\u6839\\u636E\\u5206\\u7247\\u952E\\u51B3\\u5B9A\\u7684\\uFF0C\\u5982\\u679C SQL \\u4E2D\\u4E0D\\u5305\\u62EC\\u5206\\u7247\\u952E\\uFF0C\\u5C31\\u4F1A\\u67E5\\u8BE2\\u6240\\u6709\\u5E93\\u548C\\u8868\\uFF0C\\u8FD9\\u4E2A\\u548C\\u662F\\u5426\\u6709 like \\u6CA1\\u6709\\u5173\\u7CFB\\u3002\"), mdx(\"p\", null, \"\\u5728\\u67E5\\u8BE2\\u7684\\u65F6\\u5019\\uFF0C\\u5982\\u679C\\u67E5\\u8BE2\\u6761\\u4EF6\\u6307\\u5B9A\\u4E86 sharding \\u5B57\\u6BB5\\uFF0C\\u90A3\\u5C31\\u53EF\\u4EE5\\u76F4\\u63A5\\u5B9A\\u4F4D\\u5230\\u6570\\u636E\\u5E93\\uFF0C\\u4E00\\u822C\\u5728\\u67E5\\u8BE2\\u6709\\u9650\\u6570\\u636E\\u7684\\u65F6\\u5019\\u80FD\\u591F\\u8BA1\\u7B97\\u51FA\\u6765\\u3002\"), mdx(\"p\", null, \"\\u5982\\u679C\\u4E0D\\u6307\\u5B9A sharding \\u5B57\\u6BB5\\uFF0C\\u6BD4\\u5982\\u6A21\\u7CCA\\u67E5\\u8BE2\\uFF0Cjoin \\u64CD\\u4F5C\\u7B49\\uFF0C\\u90A3\\u4E48\\u5C31\\u6BCF\\u4E2A\\u6570\\u636E\\u5E93\\u548C\\u6BCF\\u4E2A\\u6570\\u636E\\u8868\\u90FD\\u8FDB\\u884C\\u67E5\\u8BE2\\uFF0C\\u7136\\u540E\\u5404\\u4E2A\\u67E5\\u8BE2\\u7ED3\\u679C\\u6C47\\u603B\\u3002\\u5982\\u679C\\u6709 order by, group \\u7B49\\u540E\\u7EED\\u5904\\u7406\\u7684\\u64CD\\u4F5C\\uFF0C\\u5C31\\u9700\\u8981\\u521B\\u5EFA\\u4E34\\u65F6\\u8868\\uFF0C\\u7136\\u540E\\u8FDB\\u884C order by, group \\u7B49\\u7B49\\u5904\\u7406\\uFF0C\\u8FD9\\u79CD\\u64CD\\u4F5C\\u7684\\u6027\\u80FD\\u4F1A\\u5DEE\\u4E00\\u4E9B\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001NoSQL\"), mdx(\"p\", null, \"\\u8FD9\\u5757\\u5185\\u5BB9\\u66F4\\u591A\\uFF0C\\u6162\\u6162\\u518D\\u66F4~~\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/flutter-hero-with-image-fit/flutter-hero-with-image-fit.md","id":"6df12020-1eb1-5808-9368-b9e4f65d85d3","parent":{"name":"flutter-hero-with-image-fit","sourceInstanceName":"blog"},"excerpt":"想分享的是只需要一点点的数学计算就能实现 Flutter 中不同 fitMode 的图片的 Hero 转换动画。 我们经常在很多 app 都见到过在列表页的小图，点击后小图连续的动画，变成大图展示在顶部，特别的流畅。这就是 flutter 里的 hero 动画，也就是 共享元素转换 ，像一个超人一样飞来飞去的组件。 例如下面的代码(需要 科学上网 )： 实现的方式就是两个页面中用 Hero…","fields":{"title":"🍻 flutter 在不同 fit 图片上的 hero 动画","slug":"/blog/flutter-hero-with-image-fit","description":"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。","date":"2020-03-19","redirects":null,"datetime":"2020-03-19 17:38:57","categories":["code"],"series":null,"tags":["功能","技巧","flutter"],"status":"online"},"frontmatter":{"published":null,"tags":["功能","技巧","flutter"],"theme":null,"slug":"flutter-hero-with-image-fit","date":"2020-03-19 17:38:57"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"flutter-hero-with-image-fit\",\n \"title\": \"🍻 flutter 在不同 fit 图片上的 hero 动画\",\n \"date\": \"2020-03-19 17:38:57\",\n \"author\": \"Ubug\",\n \"description\": \"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。\",\n \"categories\": [\"code\"],\n \"tags\": [\"功能\", \"技巧\", \"flutter\"],\n \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst RunFlutter = makeShortcode(\"RunFlutter\");\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u53EA\\u9700\\u8981\\u4E00\\u70B9\\u70B9\\u7684\\u6570\\u5B66\\u8BA1\\u7B97\\u5C31\\u80FD\\u5B9E\\u73B0 Flutter \\u4E2D\\u4E0D\\u540C fitMode \\u7684\\u56FE\\u7247\\u7684 Hero \\u8F6C\\u6362\\u52A8\\u753B\\u3002\")), mdx(\"hr\", null), mdx(\"div\", {\n style: {\n display: 'flex',\n justifyContent: 'space-around'\n }\n }, mdx(WithFigcaption, {\n title: \"[\\u89C6\\u9891]\\u539F\\u59CB\\u8BBE\\u7F6E\",\n mdxType: \"WithFigcaption\"\n }, mdx(\"video\", {\n controls: true,\n autoPlay: true,\n loop: true\n }, mdx(\"source\", {\n src: \"https://fdb.ubug.io/storybook-videos/flutter-hero-old.mp4\",\n type: \"video/mp4\"\n }))), mdx(WithFigcaption, {\n title: \"[\\u89C6\\u9891]\\u6539\\u8FDB\\u4E4B\\u540E\",\n mdxType: \"WithFigcaption\"\n }, mdx(\"video\", {\n controls: true,\n autoPlay: true,\n loop: true\n }, mdx(\"source\", {\n src: \"https://fdb.ubug.io/storybook-videos/flutter-hero-new.mp4\",\n type: \"video/mp4\"\n })))), mdx(\"p\", null, \"\\u6211\\u4EEC\\u7ECF\\u5E38\\u5728\\u5F88\\u591A app \\u90FD\\u89C1\\u5230\\u8FC7\\u5728\\u5217\\u8868\\u9875\\u7684\\u5C0F\\u56FE\\uFF0C\\u70B9\\u51FB\\u540E\\u5C0F\\u56FE\\u8FDE\\u7EED\\u7684\\u52A8\\u753B\\uFF0C\\u53D8\\u6210\\u5927\\u56FE\\u5C55\\u793A\\u5728\\u9876\\u90E8\\uFF0C\\u7279\\u522B\\u7684\\u6D41\\u7545\\u3002\\u8FD9\\u5C31\\u662F flutter \\u91CC\\u7684 hero \\u52A8\\u753B\\uFF0C\\u4E5F\\u5C31\\u662F\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u5171\\u4EAB\\u5143\\u7D20\\u8F6C\\u6362\"), \"\\uFF0C\\u50CF\\u4E00\\u4E2A\\u8D85\\u4EBA\\u4E00\\u6837\\u98DE\\u6765\\u98DE\\u53BB\\u7684\\u7EC4\\u4EF6\\u3002\"), mdx(\"p\", null, \"\\u4F8B\\u5982\\u4E0B\\u9762\\u7684\\u4EE3\\u7801(\\u9700\\u8981\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/studio/dj\"\n }, \"\\u79D1\\u5B66\\u4E0A\\u7F51\"), \")\\uFF1A\"), mdx(RunFlutter, {\n code: simpleFlutterStr,\n mdxType: \"RunFlutter\"\n }), mdx(\"p\", null, \"\\u5B9E\\u73B0\\u7684\\u65B9\\u5F0F\\u5C31\\u662F\\u4E24\\u4E2A\\u9875\\u9762\\u4E2D\\u7528 Hero \\u7EC4\\u4EF6\\u5C55\\u793A\\u540C\\u6837\\u7684\\u7EC4\\u4EF6\\uFF0C\\u7136\\u540E\\u5728\\u9875\\u9762\\u8F6C\\u573A\\u7684\\u65F6\\u5019\\u4ECE\\u524D\\u4E00\\u9875\\u5E73\\u6ED1\\u8FC7\\u6E21\\u5230\\u540E\\u4E00\\u9875\\u3002\"), mdx(\"p\", null, \"\\u8FC7\\u6E21\\u7684\\u8FC7\\u7A0B\\u4E2D\\u5982\\u679C\\u5305\\u88F9\\u7684\\u4E24\\u4E2A\\u7EC4\\u4EF6\\u4E0D\\u540C\\uFF0C\\u5C31\\u4F1A\\u51FA\\u73B0\\u6E10\\u53D8\\u3001\\u7A81\\u53D8\\u7B49\\u5F88\\u7A81\\u5140\\u7684\\u53D8\\u5316\\uFF0C\\u6240\\u4EE5\\u7ECF\\u5E38\\u662F\\u76F8\\u540C\\u7EC4\\u4EF6\\u4EC5\\u4FEE\\u6539\\u5C3A\\u5BF8\\u548C\\u4F4D\\u7F6E\\uFF0C\\u6BD4\\u5982\\u56FE\\u7247\\u7684\\u5C55\\u793A\\uFF0C\\u4E5F\\u662F\\u6539\\u53D8\\u5BB9\\u5668\\u7684\\u5927\\u5C0F\\u6765\\u5B9E\\u73B0\\u8FC7\\u6E21\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u56FE\\u7247\\u4E0D\\u4EC5\\u6709\\u5927\\u5C0F\\u7684\\u5C5E\\u6027\\uFF0C\\u8FD8\\u6709 fit \\u7684\\u5C5E\\u6027\\uFF0Cfit=cover \\u4F1A\\u586B\\u6EE1\\u5BB9\\u5668\\uFF0Cfit=contain \\u4F1A\\u5C55\\u793A\\u5168\\u90E8\\u56FE\\u7247\\u5185\\u5BB9\\uFF0CHero \\u6CA1\\u529E\\u6CD5\\u5904\\u7406\\u8FD9\\u4E2A\\u5C5E\\u6027\\u7684\\u8FC7\\u6E21\\uFF0C\\u6240\\u4EE5\\u5C31\\u51FA\\u73B0\\u4E86\\u95EE\\u9898\\uFF0C\\u4E5F\\u5C31\\u662F\\u4E0B\\u9762\\u8FD9\\u4E2A issue \\u7684\\u95EE\\u9898\\uFF1A\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/flutter/flutter/issues/20510\"\n }, \"ISSUE\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"892px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/d8861091292e2c80b414b17f68025120/dc29a/issue1.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"10.038610038610038%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsSAAALEgHS3X78AAAAdElEQVQI1y2MuxKDMAwE+f9fI2mSVLYsG0gowkDjV6C53BiKG+l2R+o+8wynnlEYY2HFQX2AkoVhaPs4TTBW2t48nRUhf5+cXZziuyzo1Hv0tzsez9d1xCdhxLpuqPWHnDNKKUjXjDGSsadEX9lTS6bbjwN/7k6TjpZkedoAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"问题\",\n \"title\": \"问题\",\n \"src\": \"/static/d8861091292e2c80b414b17f68025120/dc29a/issue1.png\",\n \"srcSet\": [\"/static/d8861091292e2c80b414b17f68025120/2c191/issue1.png 259w\", \"/static/d8861091292e2c80b414b17f68025120/86b01/issue1.png 518w\", \"/static/d8861091292e2c80b414b17f68025120/dc29a/issue1.png 892w\"],\n \"sizes\": \"(max-width: 892px) 100vw, 892px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u95EE\\u9898\"), \"\\n \")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"743px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/7f06e6842a0d563555a3359879e85688/d4004/issue2.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"44.78764478764479%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABcElEQVQoz2VS2W6EMAzc//+3Sn3pW9WHLkcWcgfCtTAdh92qB9LIdmLGM4bL2+sLUkyoVYeG6I1Dpy1cSCXGIWNZN8zL+gvLumLME3ptYH0gYjm/fH68I+cMTwLHCx8iPAdILXlKA1JeiQ3xD/ywwKUJLk68n7Ftd1zA5zgOxHgSGmvhGWWyc77UnZ9wCytat0ARkjd2KbVOGzrW47yTZ8fl2PdCKBbbTkNbD8UoFowLBWkYqZa2OOAZZVAQN4TU2jrkaT4V7iTVxkDdblDqhq7vi9VA1SFGRObiQIgHQs6llnPpy9zlyj3f7w/LkrStQtO2GMeRjak0Sozx3KPEkbseeB+oMqX0GDKQbMVT2DehpQVjThtCKi+IOnnhVJEfg1JROZTzk7CoZe++H/8VXq8VWqVQ1w0qomlaxhrXqnqgRt005V76p2kiZszz/FPhXr6ofF3ZpeWCnXNFtdTO+xL7Xpf9GuaiXno0/4bnI4Rfds2xpHP8HMgAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"官方解答\",\n \"title\": \"官方解答\",\n \"src\": \"/static/7f06e6842a0d563555a3359879e85688/d4004/issue2.png\",\n \"srcSet\": [\"/static/7f06e6842a0d563555a3359879e85688/2c191/issue2.png 259w\", \"/static/7f06e6842a0d563555a3359879e85688/86b01/issue2.png 518w\", \"/static/7f06e6842a0d563555a3359879e85688/d4004/issue2.png 743w\"],\n \"sizes\": \"(max-width: 743px) 100vw, 743px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u5B98\\u65B9\\u89E3\\u7B54\"), \"\\n \")), mdx(\"p\", null, \"\\u89E3\\u51B3\\u529E\\u6CD5\\u5462\\u5C31\\u662F\\u4F7F\\u7528 cover \\u5C5E\\u6027\\uFF0C\\u4F46\\u662F\\u5927\\u5C0F\\u6539\\u53D8\\u7684\\u65F6\\u5019\\u6765\\u6A21\\u62DF contain \\u7684\\u6837\\u5F0F\\uFF0C\\u5177\\u4F53\\u5B9E\\u73B0\\u5982\\u4E0B\\uFF1A\"), mdx(RunFlutter, {\n code: heroFlutterStr,\n mdxType: \"RunFlutter\"\n }), mdx(\"p\", null, \"\\u5305\\u542B\\u4E86\\u524D\\u540E\\u5927\\u5C0F\\u7684\\u8BA1\\u7B97\\u548C\\u6539\\u53D8\\uFF0C\\u4EE5\\u53CA\\u8F6C\\u6362\\u8FC7\\u7A0B\\u4E2D\\u7684\\u53D8\\u52A8\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}